Image Zoom (Ken Burns)
画像ズーム(ケンバーンズ)
どんな動き?
静止画をわずかに拡大させながら長い時間をかけてゆっくり動かす、いわゆるケンバーンズ効果。写真そのものは静止画のままなのに、画面に動きと生命感が生まれるのが特徴。背景がわりに使う写真や、余韻を持たせたいセクションの画像に適用されることが多い。
よく使う場所
背景写真ヒーロービジュアルカード画像
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文(プロンプト)
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Slowly scale a still image up over a long duration to add subtle motion.Trigger:
Load (starts automatically and runs continuously).
Initial state:
transform: scale(1)
Animation:
The image scales up gradually and smoothly over a long duration, with no easing bounce — motion should feel almost imperceptible moment to moment.
Final state:
transform: scale(1.15), then optionally loops back or holds.
Timing:
duration: 15–20s, easing: linear, direction: alternate or loop.実装方法の候補
この動きは以下の技術で実装できます。
CSS animation (transform: scale)
別名・関連ワード
Ken Burns EffectSlow ZoomImage Pan and Zoom