Design Atlas
한국어
▶ Motion graphics

Frame rate

프레임 레이트

How many frames are shown per second. The same motion looks completely different at 12, 24, and 60 fps.

Also known as: FPSFrames per second
···
html
<div class="stage">
  <div class="lane"><span class="tag">12fps</span><div class="track"><i class="ball b12"></i></div></div>
  <div class="lane"><span class="tag">24fps</span><div class="track"><i class="ball b24"></i></div></div>
  <div class="lane"><span class="tag">60fps</span><div class="track"><i class="ball b60"></i></div></div>
</div>
css
.stage{position:absolute;inset:8% 8%;display:flex;flex-direction:column;justify-content:space-around}
.lane{position:relative}
.tag{display:block;margin-bottom:6px;font:11px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:clamp(18px,7vmin,32px)}
.ball{position:absolute;top:0;width:clamp(16px,6.5vmin,30px);height:clamp(16px,6.5vmin,30px);border-radius:50%;background:var(--accent)}
.b12{animation:bounce 2s steps(6) infinite}
.b24{animation:bounce 2s steps(12) infinite}
.b60{animation:bounce 2s steps(30) infinite;background:var(--accent-3)}
@keyframes bounce{0%{left:0}50%{left:calc(100% - clamp(16px,6.5vmin,30px))}100%{left:0}}

12fps echoes the "on twos" technique of traditional cel animation — each drawing holds for two frames, cutting the workload while keeping a deliberately choppy, hand-drawn texture. Studio Ghibli and classic Disney both mix this into action scenes on purpose.

24fps has been the film standard since the 1920s — the point where motion reads as natural to the eye while still being cheap enough on film stock. It's still the baseline people mean when they say something "feels cinematic."

60fps suits content where the motion information itself matters — sports broadcasts, game capture. It looks buttery smooth, but many filmmakers avoid it on purpose in narrative work because it can make footage feel like cheap home video (the "soap opera effect").

When to use

Lock the frame rate before the project starts and never change it mid-way — switching later throws off the timing of everything already animated.