화면 크기의 시작값과 끝값을 타임라인에 찍고, 그 사이의 확대를 자동으로 보간합니다.
<div class="stage"><div class="frame"><div class="frame-title">SCALE <b>100 → 145</b></div><div class="shape"><i></i><i></i><i></i></div></div>
<div class="timeline"><div class="ruler"><i></i><i></i><i></i><i></i><i></i></div><div class="track"><b class="key k1"></b><b class="key k2"></b><div class="playhead"></div></div><div class="values"><span>100%</span><span>145%</span></div></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.frame{position:absolute;inset:0 0 28%;display:grid;place-items:center}
.shape{width:34%;height:56%;border:1px solid var(--accent);background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:8%;padding:7%;transform-origin:center;animation:scale 3.2s ease-in-out infinite alternate}
.shape i{display:block;height:3px;background:var(--line)}.shape i:first-child{width:90%;background:var(--accent)}.shape i:nth-child(2){width:70%}.shape i:nth-child(3){width:48%}
.frame-title{position:absolute;top:12px;left:12px;font:9px ui-monospace,monospace;color:var(--muted)}
.frame-title b{color:var(--fg);margin-left:6px}
.timeline{position:absolute;left:12px;right:12px;bottom:12px;height:26%;border-top:1px solid var(--line);padding-top:9px}
.ruler{display:flex;justify-content:space-between;height:9px;border-bottom:1px solid var(--line)}
.ruler i{width:1px;height:5px;background:var(--muted)}
.track{position:relative;height:30px;margin-top:9px;background:var(--surface);border:1px solid var(--line)}
.key{position:absolute;top:8px;width:10px;height:10px;background:var(--accent);transform:rotate(45deg)}.k1{left:4%}.k2{right:4%}
.playhead{position:absolute;left:0;top:-10px;bottom:0;width:1px;background:var(--fg);animation:head 3.2s linear infinite}
.values{display:flex;justify-content:space-between;margin-top:5px;font:9px ui-monospace,monospace;color:var(--muted)}
@keyframes scale{0%{transform:scale(.8)}100%{transform:scale(1.34)}}
@keyframes head{0%{left:4%}100%{left:96%}}키프레임은 움직임의 특정 시점에 값을 기록하는 표시입니다. 스케일 키프레임 두 개를 두면 화면이 언제 작고 언제 커질지를 정할 수 있습니다.
타임라인에서 시작 프레임과 끝 프레임의 scale 값을 입력하고, 보간 방식으로 변화 속도를 정합니다. 데모는 재생 헤드가 두 키프레임 사이를 지나며 화면 크기를 바꿉니다.
이것은 하나의 확대 효과 이름보다 편집 원리를 가리키는 말입니다. 위치 키프레임 없이 scale만 바꾸면 화면 가장자리에서 중심이 어긋날 수 있으므로 고정할 기준점을 확인하세요.
편집기에서 직접 확대 동작을 만들거나, 변화 시점과 속도를 정밀하게 조절할 때 씁니다.