Transitions & Animations

Without any help, a CSS change is instant — one frame the button is gray, the next it's pink. Transitions and animations are the two tools that let a change happen gradually instead of snapping.

transition: animating a change in response to something

transition tells the browser that when a property's value changes, it should smoothly interpolate between the old value and the new one instead of jumping straight there. It doesn't cause anything to move by itself — it just changes how a change that already happens (like a :hover state) plays out. Hover over the box below with and without the transition line to feel the difference:

The shorthand above packs together the property to watch, and how long the change should take. Delete the transition line entirely and the same hover effect will still happen — it'll just snap instead of glide.

Easing: the shape of the motion

A duration alone doesn't say whether the motion feels mechanical or natural. The timing function controls that curve. linear moves at a constant speed the whole way; ease-in-out starts slow, speeds up in the middle, and slows down again at the end, which usually reads as smoother to the eye:

Swap ease-in-out for linear in the box above and watch the same move suddenly feel stiffer, even though the distance and duration haven't changed at all.

@keyframes: motion with no trigger required

A transition only plays when a property actually changes — it needs a cause, like a hover or a class being toggled by JavaScript. @keyframes defines a self-contained sequence of steps that can run on its own, on a loop, the moment the page loads. You name a sequence, describe what the styles should look like at each percentage of the way through, then apply it with the animation property:

The animation shorthand above reads as: run the pulse keyframes, take 1.4 seconds per cycle, ease in and out, and repeat forever (infinite). Change infinite to a number like 3 and it'll pulse three times and stop.