The transition property animates a CSS property's change smoothly over time, rather than having the change happen instantly, combining transition-property, duration, timing-function, and delay into a single shorthand.

Syntax

transition: property duration timing-function delay;

Deep Dive Course

A transition only actually animates when the property it's watching changes value, typically triggered by something like a :hover state, a class toggle via JavaScript, or a media query changing which styles apply — a transition declared but never triggered by an actual property change produces no visible animation at all. Not every CSS property can be smoothly transitioned; only properties with sensibly interpolatable intermediate values, like color, width, or opacity, support transitions, while properties like display, which have no meaningful in-between state, cannot be transitioned.

1Understanding Transition

💡

A transition can't animate a property change that happens simultaneously with the element's initial appearance in the DOM — a newly-added element already rendered with its end styles has nothing to visibly transition from, since there was no earlier state present in the DOM for the browser to animate away from.

editor.html

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

localhost:3000

2Practical Example

Here is a real-world application of Transition showing how it is used in production CSS code.

editor.html

.card {
  transform: scale(1);
  transition: transform 0.2s ease-out;
}

.card:hover {
  transform: scale(1.05);
}

localhost:3000

3Best Practices

Follow these guidelines when working with Transition:

1. Declare transition on an element's default/base state, not just its hover or active state, so the transition applies smoothly in both directions, going into and out of that state

2. Specify transition-property explicitly, rather than the catch-all keyword all, when only specific properties actually need to animate, for both clarity and slightly better performance

3. Remember not every CSS property can be transitioned — properties without a sensible in-between value, like display, simply switch instantly regardless of a transition declaration

⚠️

Tip: A transition can't animate a property change that happens simultaneously with the element's initial appearance in the DOM — a newly-added element already rendered with its end styles has nothing to visibly transition from, since there was no earlier state present in the DOM for the browser to animate away from.

editor.html

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

localhost:3000

Examples

Example 01Basic Usage

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

Example 02Advanced Example

.card {
  transform: scale(1);
  transition: transform 0.2s ease-out;
}

.card:hover {
  transform: scale(1.05);
}

Best Practices

Declare transition on an element's default/base state, not just its hover or active state, so the transition applies smoothly in both directions, going into and out of that state
Specify transition-property explicitly, rather than the catch-all keyword all, when only specific properties actually need to animate, for both clarity and slightly better performance
Remember not every CSS property can be transitioned — properties without a sensible in-between value, like display, simply switch instantly regardless of a transition declaration

Interview Question

Why does a transition declared on an element fail to animate anything if that element already appears in the DOM directly in its final, 'end' state, with no earlier state present?▼

Hint: Think about what a transition actually needs in order to have something to animate between — is a single, final value enough, or does it need both a starting and an ending value?

A CSS transition works by detecting an actual change to a watched property's computed value, from some previous value to some new value, and then smoothly interpolating between those two specific values over the specified duration — it fundamentally requires both a genuine before state and a genuine after state to have anything at all to animate between. If an element is newly inserted into the DOM already rendered with its final, intended styles from the very first moment it exists, there was never any earlier, different computed value for that property that the browser could reference as the starting point for an interpolation, the element simply appears already at its end state with no preceding value on record to transition away from. This is exactly why achieving an entrance animation, an element fading or sliding in as it first appears, typically requires a specific technique, like initially rendering the element in its before state and then triggering the actual style change to its final state via a class added shortly afterward in code, giving the transition an actual, genuine before-and-after value pair to interpolate between, rather than relying on a transition declared alongside styles that are already present from the very first render.

Exercises

MediumPractice using Transition in a real scenario.

View Solution

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

Frequently Asked Questions

Why does a transition declared on an element fail to animate anything if that element already appears in the DOM directly in its final, 'end' state, with no earlier state present?▼

Related Functions

Transition-durationTransition-timing-functionAnimation