動画のカメラ
ケン・バーンズ（ゆっくり拡大）Ken Burns
写真をゆっくり拡大しながら、少し動かす。
AIへの指示例上の調整が入ります
スライド用（PowerPoint・Canva を操作するAIに）スライドの写真は、5秒かけてゆっくり115%まで拡大しながら、少し横へ動かしてください（ケン・バーンズ）。始めと終わりがゆっくりになる（イーズインアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）静止画に5秒のケン・バーンズ効果を付けてください。100%から115%へゆっくり拡大しながら、右上へ少しパンします。速さの変わり方はイーズインアウト（ease-in-out）。
細かい指定動画を作る人・細かく指示したい人向け
- 長さ
- 5秒
- 速さの変わり方
- イーズインアウト（ease-in-out）
- 曲線の数値
- cubic-bezier(0.42, 0, 0.58, 1)
- 変えるもの
- 大きさ 100% → 115%・位置を少し右上へ
- 見せ方
- 写真の外側は枠で切る（はみ出しを見せない）
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。
<!-- photo.jpg を、使う写真のファイル名に置き換える -->
<div class="fb-frame">
<img class="fb-ken-burns" src="photo.jpg" alt="">
</div>
<style>
.fb-frame { overflow: hidden; width: 480px; aspect-ratio: 16 / 9; } /* はみ出しを隠す */
.fb-ken-burns {
width: 100%; height: 100%; object-fit: cover;
animation: fb-ken-burns 5s ease-in-out both;
}
@keyframes fb-ken-burns {
to { transform: scale(1.15) translate(-3%, -2%); }
}
/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
.fb-ken-burns { animation: none; transition: none; }
}
</style>
- どう動くか
- 止まった写真を、ゆっくり拡大しながら少し横へ動かします。写真だけでも、動画のような動きと奥行きが出ます。名前は、この見せ方をよく使ったドキュメンタリーの監督から来ています。
- 使う場面
- 写真のスライドショー、思い出の動画、記事の冒頭の写真。
- やりすぎに注意
- 拡大しすぎると写真が粗く見えます。110〜120%くらいまでが目安です。
