Zoom In

どんな動き？

要素がかなり小さい状態から、実寸へ勢いよく拡大しながら現れるダイナミックなアニメーション。scale-inよりも変化量が大きく、勢いのある印象を与えるため、ヒーロー画像やポップアップ、注目させたいCTAなどインパクトを出したい場面で使われる。

よく使う場所

日本語での表現例

こんな言葉で説明される動きです。

AIへの指示文（プロンプト）

ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのまま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.

実装方法の候補

この動きは以下の技術で実装できます。

別名・関連ワード