CSS Transitions and Reduced Motion

CSS transitions make changes between style states feel gradual. Learn how to control the property, duration and timing, and how to respect reduced-motion preferences.

Quick answer: Set transition-property and transition-duration on an element to animate a style change, such as a button color on hover or keyboard focus. Keep effects brief and provide a reduced-motion option for visitors who request less animation.

Transition a button color

A transition needs a starting style and a changed style. Put the transition on the base rule so it applies when the element changes into and out of the interactive state.

.button {
  background-color: #176b9a;
  color: white;
  transition: background-color 180ms ease;
}

.button:hover,
.button:focus-visible {
  background-color: #104d70;
}

The example responds to both pointer hover and keyboard focus. Focus styling helps people who navigate with a keyboard locate the active control.

Choose a property, duration and timing

The transition shorthand can include a property, duration, timing function and delay. Naming the property makes the effect easier to understand and avoids animating unrelated layout changes.

.card {
  transform: translateY(0);
  transition: transform 160ms ease-out;
}

.card:hover {
  transform: translateY(-3px);
}

Use a duration that communicates the change without making a small interaction feel slow. Avoid applying transition: all everywhere; it can animate unexpected properties when other styles change.

Respect reduced-motion preferences

Some people ask their device to reduce motion. Use the prefers-reduced-motion media feature to remove or shorten nonessential movement while keeping the same information and controls available.

.panel {
  transition: opacity 180ms ease, transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

What should you transition?

For interface feedback, prefer simple changes such as color, opacity or transform. Avoid using long or large movements that distract from the content. Make sure important state changes remain understandable even when motion is reduced.

Why does my CSS transition not work?

A transition runs when a property changes between two values the browser can interpolate. Check that the starting rule defines the property and that the interaction state changes that same property.

Can CSS transitions animate from display none?

The display property does not behave like a typical interpolated value. For simple reveals, use opacity or transform with an appropriate visibility and interaction pattern, or use a deliberate keyframe animation where suitable.

Practice: make a clear focus effect

Create a link or button with a visible base style. Add a short transition for its background color, then apply the changed color to both :hover and :focus-visible. Finally, add a reduced-motion rule and confirm the effect still communicates the state without movement.