Cel animation

셀 애니메이션

The traditional technique of drawing a character on a transparent celluloid sheet and shooting it layered over a static painted background — "cel" is short for celluloid.

Also known as: Traditional animation셀룰로이드 애니메이션

···

html

<div class="stage">
  <div class="bg"></div>
  <div class="char" id="char"></div>
  <span class="frame-no" id="fn">FRAME 1</span>
</div>

css

.stage{position:absolute;inset:0;overflow:hidden}
.bg{position:absolute;inset:0;background:
  linear-gradient(180deg,var(--surface) 0 62%,var(--line) 62% 64%,var(--bg) 64% 100%)}
.char{position:absolute;left:50%;bottom:24%;width:clamp(26px,11vmin,52px);height:clamp(50px,20vmin,96px);margin-left:calc(clamp(26px,11vmin,52px) / -2);
  background:var(--accent);border-radius:12px 12px 4px 4px;animation:walk .8s steps(4) infinite}
@keyframes walk{0%{transform:translateX(-30%) rotate(-4deg)}25%{transform:translateX(-10%) rotate(2deg)}50%{transform:translateX(10%) rotate(-2deg)}75%{transform:translateX(30%) rotate(4deg)}100%{transform:translateX(-30%) rotate(-4deg)}}
.frame-no{position:absolute;top:6%;left:6%;font:10px/1 ui-monospace,monospace;color:var(--muted)}

const fn = document.getElementById('fn');
let i = 0;
setInterval(() => { i = (i % 4) + 1; fn.textContent = 'FRAME ' + i; }, 200);

The background gets painted once and stays fixed; only the moving character is redrawn frame by frame on a transparent cel and layered on top. Not having to repaint the background every frame cut the workload dramatically, and that division of labor — background painter, key animator, in-betweener, colorist — is what made the entire 20th-century animation industry possible at scale.

Digital tools replaced the physical celluloid with the concept of layers: locking a background layer while swapping out only the character layer frame by frame in Toon Boom or Adobe Animate is the digital version of the exact same workflow.

Real cels yellowed and picked up dust over time, and that "vintage cel" texture is now sometimes recreated on purpose with film grain and color-bleed filters.

When to use

Change the background often and cel animation loses its whole advantage — it's most efficient in scenes where the backdrop stays fixed.