화면을 짧은 순간에 크게 당겨 놀람이나 코믹한 강조를 만듭니다.
<div class="stage"><div class="scene"><div class="rings"></div><div class="target"><i></i><b>!</b></div><div class="rays"></div></div>
<div class="label"><span class="wide">WIDE</span><span class="close">CRASH ZOOM</span></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;background:linear-gradient(145deg,#b9c7c5,#e9dfc7)}
.scene{position:absolute;inset:0;transform-origin:54% 49%;animation:crash 2.8s infinite}
.target{position:absolute;left:48%;top:35%;width:14%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 0 0 12px #fff7}
.target i{position:absolute;width:68%;height:68%;border:2px solid #fff;border-radius:50%}
.target b{font:700 clamp(24px,7vw,60px) ui-monospace,monospace}
.rings{position:absolute;inset:10%;border:1px solid #35474066;border-radius:50%;transform:scaleX(1.5)}
.rays{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 54% 49%,transparent 0 13deg,#fff6 13.5deg 14deg,transparent 14.5deg 27deg);mask-image:radial-gradient(circle at 54% 49%,transparent 0 20%,#000 75%);opacity:.5}
.label{position:absolute;left:12px;bottom:12px;min-width:108px;min-height:20px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:10px ui-monospace,monospace;letter-spacing:.1em}
.label span{position:absolute;inset:5px 8px;white-space:nowrap}
.wide{animation:wide 2.8s infinite}.close{animation:close 2.8s infinite}
@keyframes crash{0%,38%{transform:scale(1)}45%{transform:scale(2.35)}78%{transform:scale(2.35)}88%,100%{transform:scale(1)}}
@keyframes wide{0%,40%,100%{opacity:1}41%,90%{opacity:0}}
@keyframes close{0%,40%,100%{opacity:0}41%,90%{opacity:1}}크래시 줌은 멀리 있던 대상을 순간적으로 확 키우는 움직임입니다. 문이 열리거나 중요한 사실이 드러나는 순간에 시선을 한곳으로 강하게 끌어옵니다.
편집에서는 확대 시작과 끝 사이를 아주 짧게 잡고, 앞뒤에 잠깐 멈춤을 두면 속도 차이가 선명합니다. 데모는 장면을 급히 당긴 뒤 크게 유지했다가 원래 구도로 되돌립니다.
일반 줌이 거리를 천천히 좁히는 느낌이라면 크래시 줌은 충격을 주는 짧은 강조입니다. 자주 쓰거나 확대율을 지나치게 높이면 장면의 정보보다 효과가 먼저 보입니다.
반응이나 발견을 한 박자 강하게 강조할 때 씁니다. 대사·효과음의 강한 순간과 맞추면 움직임의 이유가 분명해집니다.