Zoom In
ズームイン
どんな動き？
要素がかなり小さい状態から、実寸へ勢いよく拡大しながら現れるダイナミックなアニメーション。scale-inよりも変化量が大きく、勢いのある印象を与えるため、ヒーロー画像やポップアップ、注目させたいCTAなどインパクトを出したい場面で使われる。
よく使う場所
ヒーロー画像ポップアップCTAボタンアイキャッチ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Zoom the element in dramatically from a much smaller scale.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
opacity: 0
scale: 0.4
Animation:
Scale up rapidly past full size, then settle back with a slight overshoot.
Final state:
opacity: 1
scale: 1
Timing:
duration: 0.7s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSIntersection ObserverGSAP
別名・関連ワード
Zoom In EntrancePop Zoom