Understand the idea

A transition can make a state change easier to follow. Movement should support an interaction rather than become a requirement for understanding the page.

Transition specific properties instead of using all. Keep durations short. prefers-reduced-motion detects a user preference for less motion; provide a calm alternative that still communicates focus and state.

Read the example

This is a CSS fragment. Put it in a stylesheet and supply the matching HTML described in the exercise.

CSS · EXAMPLE
.card { transition: transform 160ms ease; }
.card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

A small mistake, explained

What goes wrong

Hiding content until an animation completes can leave it unavailable if the animation or script does not run.

How to fix it. Make content visible by default. Enhance the interaction without making movement a prerequisite.

Try it yourself

Turn on reduced motion in your operating system or browser developer tools. Check that content and controls still work.

Further reading

W3C — prefers-reduced-motion (new tab)

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.