Bounce In
バウンスイン
どんな動き？
要素が縮んだ状態から実寸を超えて一度大きく飛び出し、小さく揺れ戻りながら最終的に馴染むアニメーション。ボールが弾むような物理的な楽しさがあり、CSSのkeyframesやanime.js・GSAPのelasticイージングで表現される。ポップアップやバッジ、ゲーム的な演出をしたいボタンなど、遊び心を出したい要素の登場に使われる。
よく使う場所
バッジポップアップ通知ゲーム風UICTAボタン
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Bounce the element into place, overshooting past full size before settling with a couple of small oscillations.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
opacity: 0
scale: 0.3
Animation:
The element scales up past its final size, overshoots, then oscillates with decreasing amplitude before settling — like a ball bouncing to a stop.
Final state:
opacity: 1
scale: 1
Timing:
duration: 0.8–1s
easing: custom elastic/overshoot keyframes
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSanime.jsGSAP
別名・関連ワード
Elastic InSpring InBounce Entrance