Ken Burns effect

<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%)}}