Animation and motion, with respect for people

CSS animation is change over time, made with transitions and @keyframes. The prefers-reduced-motion query tones it down for people it harms.

Why a site needs motion

Good motion works like a gesture: a button lifts a little, so you can press it; a block slides in from the side, so that’s where it came from. It shows what happened and where things came from, and it explains an interface without words. Bad motion distracts, slows things down and, for many people, simply does harm: sliding, zooming, spinning and parallax (when the background and foreground move at different speeds) make people with vestibular disorders dizzy and sick. So this lesson’s rule is: add motion that explains something, and let people turn it down.

Transitions

A transition smoothly changes a property’s value when it changes:

.button {
  transition-property: transform, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.button:hover {
  transform: translateY(-2px);
  background-color: var(--color-accent);
}

Now when you hover, the button doesn’t jump but lifts smoothly. There are three parts: what changes (transition-property), how long it takes (duration) and how it moves (timing-function, the speed curve). For an interface’s response, 150 to 300 milliseconds is enough: shorter is imperceptible, and longer makes people wait. The ease-out curve (fast at the start, slow at the end) suits things appearing, ease-in suits things leaving, and linear suits even movement (a loading indicator).

Don’t write transition: all: the transition would start smoothly changing everything, including things you didn’t expect. List the properties.

Animation

When you need not “from one state to another” but a sequence of frames of your own, you use keyframes:

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

.card {
  animation-name: rise;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

@keyframes describes what happens to what, and the animation-* properties attach it to an element. Use repeating and endless animations (animation-iteration-count: infinite) with great care: they distract all the time.

What to animate. Animate transform (moving, scaling, rotating) and opacity: the graphics card handles them, and the page stays smooth. But width, height, top, left and margin make the browser recalculate the layout on every frame, so the animation stutters and uses up battery. Try it all in the diagram.

.card {
  transition-property: transform, opacity;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

Respect: prefers-reduced-motion

Almost every system has a “reduce motion” switch in its settings. People turn it on when motion harms or bothers them. The browser passes that setting to the site, and CSS can read it:

@media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: none;
  }

  .card {
    animation-name: appear; /* only a gentle fade, no slide */
  }
}

What exactly should go? “Reduce motion” doesn’t mean “remove all feedback”. Remove movement, scaling, spinning, parallax and autoplay. Keep gentle fades and color changes: they do no harm and still help people see what happened. Don’t turn every transition down to zero.

What the standard says. WCAG requires that anything that moves by itself for more than five seconds, next to other content, can be stopped, paused or hidden (success criterion 2.2.2). Nothing on a page may flash more than three times a second, since that can trigger a seizure in people with photosensitive epilepsy (2.3.1). And motion that interaction triggers, such as parallax on scroll, can be turned off (2.3.3, level AAA).

Practice

Add motion to your 2025-era page. The button gets a response, and the cards appear. Then, most important of all, you’ll write the block for “reduce motion”.

A warning, as in the lesson on responsive layout: the checks see computed values, and they can’t see a prefers-reduced-motion block. Check it yourself. In Chrome, open the developer tools and the “Rendering” tab (the “⋮” menu, then “More tools”), and find the option “Emulate CSS media feature prefers-reduced-motion”. Choose “reduce” and reload the page: the cards should appear without sliding, and the button shouldn’t lift when you hover.

The 2025-era page is saved in the gallery. If you have “reduce motion” on, you’ll see it in its quiet version. Check both: with motion and without.

What was wrong before

Motion on websites has been through several eras. In the days of Flash (the 2000s), sites opened with intros you couldn’t skip. The scrolling <marquee> and the flashing <blink> were part of HTML itself, and were declared obsolete long ago. From the 2010s sites were decorated with parallax and huge animations, and the complaints of nausea grew so many that in 2017 Safari was the first to add prefers-reduced-motion, with the other browsers following. The main lesson of this story: motion belongs to the reader, not the author.