Transitions

`transition` makes property changes animate over time. Hover effects, theme swaps, mode toggles — almost free.

3 min read Level 1/5 #css#transitions#animation

What you'll learn

Apply a transition
Pick easing and duration
Recognize which properties animate

A transition animates between two values when a property changes. No keyframes — just “go from A to B smoothly”.

The Shape

.btn {
  background: blue;
  transition: background 200ms ease;
}

.btn:hover {
  background: navy;
}

When :hover fires, the background fades from blue to navy over 200ms.

The Shorthand

transition: <property> <duration> <easing> <delay>;
transition: background 200ms ease 0ms;
transition: all 200ms ease;          /* animate every property */

For multiple properties with different timing:

transition:
  background 200ms ease,
  transform 300ms ease-out;

Easing — The Curve of the Animation

Keyword	Feel
`linear`	Constant speed (rarely natural)
`ease`	Default — slow start, fast middle, slow end
`ease-in`	Slow start
`ease-out`	Slow end
`ease-in-out`	Slow at both ends

For more control, use cubic-bezier(x1, y1, x2, y2) or build one at cubic-bezier.com.

Which Properties Transition Well

✅ opacity — fast
✅ transform — fast (GPU)
✅ background, color — works fine
✅ border-radius, border-color
⚠️ width, height, padding, margin — works, but causes layout, slower
❌ display — doesn’t transition

For animating “appear / disappear”, animate opacity and transform together; toggle display: none outside the transition.

`transition: all`

transition: all 200ms ease;

Convenient, but can cause unwanted animations (color picker flicker, layout flashes). Often safer to list properties explicitly.

Respect `prefers-reduced-motion`

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

Some users get motion sickness. Setting their preference disables transitions globally.

Up Next

For more complex animations, use @keyframes.

Animations →