Easing Function

ELI5 — The Vibe Check

Easing functions control the speed curve of an animation — do you start fast and slow down? Accelerate then decelerate? Bounce at the end? Linear is boring and robotic. Ease-in-out feels natural. Cubic-bezier gives you infinite control. Easing is the difference between 'meh' and 'smooth.'

Real Talk

Easing functions define the rate of change of an animation over time. CSS provides keywords (ease, ease-in, ease-out, ease-in-out, linear) and the cubic-bezier() function for custom curves. Spring-based easing simulates physics for natural motion. Steps() creates discrete frame-by-frame animations.

Show Me The Code

.smooth { transition: transform 0.3s ease-out; }
.bouncy { transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.snappy { transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); }

When You'll Hear This

"Never use linear easing — ease-out makes exits feel natural" / "cubic-bezier(0.68, -0.55, 0.27, 1.55) gives you that satisfying overshoot bounce"