Transitions

Smoothly interpolate CSS property changes over time.

CSS4 min readConcept 29 of 43

What are CSS Transitions?

CSS Transitions allow you to change property values smoothly, over a given duration, rather than having them snap instantly.

They are the easiest way to add polish and interaction feedback to your interface, such as a button gently highlighting when a user hovers over it.

Why they matter

Without transitions, state changes (like :hover, :focus, or toggling a class) feel abrupt and unnatural.

Transitions provide crucial visual feedback, confirming to the user that the interface has registered their action.

How they work

You define a transition on the element's base state, not on the hover state. This ensures the animation plays both when the state is applied and when it is removed.

The transition shorthand takes four values: the property to animate, the duration, the timing function (the pacing), and an optional delay.

For example, transition: transform 0.3s ease-out; tells the browser to smoothly interpolate any changes to the transform property over 0.3 seconds.

Try it yourself

Hover over the button in the lab to see the transition in action, then tweak the duration and timing function.

Transition Duration & Timing

Duration

How long the animation takes.

0.5s
0s2.0s

Timing Function

The pacing (acceleration/deceleration) of the change.

/* The base element */
.button {
background-color: indigo;
transform: scale(1);

/* The magical smoothing rule */
transition: all 0.5s ease;
}

/* The hover state */
.button:hover {
background-color: pink;
transform: scale(1.1) translateY(-12px);
}
iNotice how setting duration to 0s makes the change instant, exactly like having no transition at all.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which of the following is the most performant property to transition?
  2. 2Where is the correct place to write the transition rule for a hover effect?
  3. 3What is the default duration of a CSS transition if none is specified?

Remember this

  • Transitions only work on properties with calculable intermediate values (like colors or numbers, but not display: none).
  • You must specify a duration; if you omit it, the default is 0s (instant).
  • Place the transition rule on the base element, not inside the :hover pseudo-class, so the reverse animation plays when the hover ends.

Done with this concept?

Mark it complete to track your progress. No login needed.