Frontend · interactive

CSS transitions and animations

Easing decides how motion feels: linear looks mechanical, ease-out feels responsive, an overshoot feels springy. Which property you animate decides how expensive each frame is. This box is animated by your browser.

Easing curve

ease

Work per frame

layout
paint
composite

Handled by the compositor on the GPU. Smooth even if the main thread is busy.

Easing

Animate

Step 1 of 4 · read left to right

1
Transitions for state changes
When a property changes, interpolate over a duration with an easing curve.
transition: transform 200ms ease-out
2
Pick easing on purpose
ease-out for things entering (fast start, gentle stop), ease-in for leaving, overshoot sparingly.
UI motion: 150–300 ms.
3
Animate transform and opacity
They skip layout and paint and run on the compositor. Animating left, top or width relayouts every frame.
Check with DevTools' Performance panel.
4
prefers-reduced-motion
Some people get motion sick. Tone down or remove non-essential animation when they ask.
@media (prefers-reduced-motion: reduce)

In production

Tools and technologies

Smooth motion depends on easing and which property moves.

Not tied to one language — use these names when you search docs or design a system.