정지 화면을 천천히 확대하거나 이동해 사진 한 장에 카메라 움직임을 더합니다.
<div class="stage"><div class="landscape"><div class="sky"></div><div class="sun"></div><div class="mountain m1"></div><div class="mountain m2"></div><div class="field"></div><div class="tree t1"></div><div class="tree t2"></div></div>
<div class="note">STILL FRAME <span>slow pan + zoom</span></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;background:#a7c8d1}
.landscape{position:absolute;inset:-12%;transform-origin:48% 54%;animation:drift 5.4s ease-in-out infinite alternate}
.sky{position:absolute;inset:0 0 40%;background:linear-gradient(180deg,#9cc7d1,#e4d7b9)}
.sun{position:absolute;left:70%;top:17%;width:13%;aspect-ratio:1;border-radius:50%;background:#f5e4bc}
.mountain{position:absolute;bottom:35%;width:78%;height:56%;clip-path:polygon(0 100%,43% 3%,100% 100%);background:#778a7e}
.m1{left:-12%}.m2{left:43%;height:44%;background:#566f68}
.field{position:absolute;inset:64% 0 0;background:linear-gradient(165deg,#a9aa77,#596f54)}
.tree{position:absolute;bottom:13%;width:4%;height:29%;background:#42544a}
.tree:before{content:"";position:absolute;left:-160%;top:-28%;width:420%;height:60%;border-radius:50%;background:#3e6152}
.t1{left:24%}.t2{left:82%;height:20%}
.note{position:absolute;left:12px;bottom:12px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:10px ui-monospace,monospace;letter-spacing:.06em}
.note span{margin-left:8px;color:var(--muted);letter-spacing:0}
@keyframes drift{0%{transform:scale(1) translate(2%,0)}100%{transform:scale(1.29) translate(-5%,-3%)}}켄 번스 효과는 사진이나 정지 화면을 천천히 확대하고 옆으로 옮기는 방식입니다. 멈춰 있는 한 장에서도 장면 안으로 들어가거나 풍경을 훑는 느낌을 만들 수 있습니다.
시작과 끝의 scale·position을 키프레임으로 정하고, 두 지점 사이를 부드럽게 보간합니다. 데모의 풍경은 넓은 한 장면을 느리게 밀고 당기며 훑습니다.
이름은 다큐멘터리에서 널리 알려진 기법을 가리키지만, 모든 느린 확대를 엄밀하게 부르는 말은 아닙니다. 작은 이미지에 과하게 확대하면 흐림과 계단 현상이 드러납니다.
사진·정지 캡처를 영상에 넣을 때 화면이 멈춰 보이지 않도록 움직임을 더합니다. 차분한 설명이나 회고 장면에 어울립니다.