Crash zoom

크래시 줌

A very fast zoom snap creates a jolt of surprise or comedy.

···
html
<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>
css
.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}}

A crash zoom rapidly enlarges a distant subject. It pulls the eye hard toward one point, often at a reveal, a sudden reaction, or a comic beat.

In an edit, make the move between the start and end scales very short, with brief holds before and after so the speed contrast reads. The demo snaps in, holds the crop, then returns to the wide view.

A regular zoom feels like a gradual approach; a crash zoom is a short jolt. Use it sparingly and avoid a crop so tight that the subject becomes hard to read.

When to use

Use it to punctuate a reaction or discovery. Aligning the move with a clear beat in the dialogue or sound makes its purpose easier to read.

Open as page ↗

Suggest an entry

Tell us about a film term or effect that’s missing. We review each suggestion.