Station 07 · Transitions & easing

The choreography

When you raised the curtain in our theater, you watched two lines of CSS do all the work. A transition is a contract with the browser: when this value changes, do not jump — travel. You choose how long the trip takes and the shape of the journey.

This is the actual curtain rig, wired to your hands. Set the clock, pick the easing, run it. The code under the controls is live — what you see is exactly what ships.

curtain.css — the whole trick

1.curtain {
2  transition: transform 700ms
3              cubic-bezier(0.65, 0, 0.35, 1);
4}
5
6.open .curtain.left  { transform: translateX(-103%); }
7.open .curtain.right { transform: translateX(103%);  }

Duration — 700ms

Easing — how the motion breathes

The picture

Try Overshoot at 400ms, then House glide at 700ms — same two lines of CSS, completely different personality. We animate transform because the browser can slide it on the graphics card without repainting the page; animating left would stutter.

What you just learned

A transition needs three answers: what property, how long, and with what easing.
Easing is the personality. Linear feels mechanical; a good curve feels like fabric, or a bounce, or a held breath.
Animate transform and opacity — the browser moves them on the graphics card. Animating layout properties like left makes the page stutter.
The grand curtain in our theater is exactly this: one transition line and one transform per side. Stagecraft is cheaper than it looks.

Next — Station 08: The wiring

Right this way…