Click Ripple
クリックリップル
どんな動き？
クリックした瞬間、その場所を中心に円が拡大しながら透明になっていく波紋アニメーション。Material Designに由来する定番のフィードバック表現で、ボタンやカードが「押された」ことを視覚的に伝えられる。CSSとJavaScriptだけで実装できる手軽さから、フォームのボタンやナビゲーション項目など幅広い箇所で使われる。
よく使う場所
ボタンカードナビゲーション項目
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Expand a circle outward from the click point while fading it out, clipped within the clicked element.Trigger:
click on the element.
Initial state:
A small circle centered at the click point: scale: 0, opacity: 0.5
Animation:
The circle scales up rapidly to cover the element while its opacity fades toward 0, clipped to the element's bounds.
Final state:
scale: large enough to cover the element, opacity: 0
Timing:
duration: 0.5–0.6s, easing: ease-out. Play once per click.実装方法の候補
この動きは以下の技術で実装できます。
CSSJavaScript
別名・関連ワード
Material RippleClick WaveRipple Effect