CSS Transitions: Animating State Changes

Why it exists

Web interfaces feel jarring when states change instantly. A button appearing or a menu sliding out without animation can feel cheap or broken. Transitions provide a simple, declarative way to create motion and guide the user's eye, making UIs feel more polished and intuitive.

The mental model

Think of a CSS transition as giving instructions to the browser on how to get from point A to point B. Without a transition, the browser teleports an element's property from its start value to its end value. With a transition, you tell it to travel smoothly over a specific duration, with a certain speed curve, and maybe after a short delay.

How it works

The transition property is a shorthand for several constituent properties: transition-property (which property to animate, e.g., background-color or all), transition-duration (how long it takes, e.g., 300ms), transition-timing-function (the speed curve, e.g., ease-in-out), and transition-delay (how long to wait before starting). You define these on an element's base state. When a property you're watching changes (due to a pseudo-class like :hover or a JavaScript style change), the browser automatically creates the in-between frames.

When to use it

Use transitions for simple state changes to provide user feedback. Examples include: changing a link's color on hover, sliding a mobile menu into view, or fading in a tooltip. They are ideal for micro-interactions that make an interface feel responsive. They are most performant for properties like transform and opacity.

When not to use it

Transitions are not for complex, multi-stage animations; use CSS Animations (@keyframes) for that. Avoid transitioning properties that are expensive to render, like width, height, or margin, as they can cause layout recalculations on every frame, leading to janky performance. Instead, prefer animating transform: scale() or transform: translate().

One canonical example

To make a button's background color fade smoothly when a user hovers over it, define the transition on the base button class. button { background-color: blue; transition: background-color 0.3s ease; } button:hover { background-color: darkblue; } When the user hovers, the background changes from blue to darkblue over 0.3 seconds. When they move the mouse away, it smoothly transitions back.