CSS Transitions

Transitions let a property change smoothly over time instead of jumping instantly from one value to another, which is what makes hover effects, expanding menus, and other interactive feedback feel polished rather than abrupt. A transition is defined with a small set of properties that describe what to animate, how long it takes, and the pacing of the change.

Transitions are triggered by an actual change in a property's value — commonly caused by a pseudo-class like :hover or :focus, or by a class being toggled with JavaScript — and they only animate between a starting and ending value, unlike full keyframe animations which can define multiple intermediate steps.

Why it matters

Without a transition, a style change on hover is instant and feels abrupt. A fraction of a second of smooth change makes an interface feel responsive and shows the user what happened. Transitions are the simplest form of animation in CSS and the one you will use on almost every interactive element.

The Transition Properties

Four properties (usually combined into the transition shorthand) control the effect.

• transition-property — which CSS property to animate, e.g. background-color, transform, or all for every animatable property.
• transition-duration — how long the change takes, e.g. 0.3s or 300ms.
• transition-timing-function — the pacing curve of the change: ease (default, starts fast then slows), linear (constant speed), ease-in, ease-out, or a custom cubic-bezier().
• transition-delay — an optional pause before the transition begins.

The Shorthand and Multiple Transitions

The shorthand combines all four in one line: transition: background-color 0.3s ease-in-out;. Multiple properties can transition with different timings by comma-separating shorthand values: transition: transform 0.2s ease, opacity 0.4s linear; animates transform and opacity independently, each with its own duration and easing.

What Can Be Transitioned

Only properties with an intermediate, interpolatable value can transition smoothly — numeric values, colors, and transforms all work well. Properties like display cannot be smoothly transitioned because there's no "halfway" state between block and none. For performance, transform and opacity are the cheapest properties to animate, because they don't trigger the browser to recalculate layout the way width or top do.

Examples

.button {
  background-color: #0057d9;
  transform: scale(1);
  transition: background-color 0.3s ease, transform 0.2s ease-out;
}

.button:hover {
  background-color: #003f9e;
  transform: scale(1.05);
}

On hover, the button smoothly darkens in color over 0.3 seconds and gently scales up to 105% of its size over 0.2 seconds, rather than snapping instantly to the new values.

.dropdown {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.dropdown.open {
  opacity: 1;
  visibility: visible;
}

When the .open class is added, the dropdown fades in smoothly over a quarter second instead of appearing instantly, and it fades back out the same way when the class is removed.

Exercise

Give the button a blue background and white text. On hover, the background becomes dark blue and the button grows slightly. Both changes should take 0.3 seconds with an ease timing.

Expected result: moving the pointer over the button darkens and enlarges it smoothly, and it returns smoothly when the pointer leaves.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

button {
  background-color: royalblue;
  color: white;
  /* TODO: transition for background-color and transform */
}

button:hover {
  /* TODO: darker background, slightly larger */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

button {
  background-color: royalblue;
  color: white;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: darkblue;
  transform: scale(1.05);
}

Quick quiz

Interview questions