Platform under construction

Animation & Interaction

Advanced

Reduced Motion

Reduced motion respects users who prefer less animation. It is not optional polish; it is part of professional motion design.

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

Motion mental model

Good motion includes a plan for less motion.

Some users set a system preference to reduce motion because movement can be distracting, uncomfortable or physically unpleasant.

CSS can detect that preference with prefers-reduced-motion. The goal is not always to remove every transition, but to remove or simplify motion that travels, spins, zooms or loops.

A reduced-motion fallback should preserve information. If animation communicates a state, the still version must communicate the same state clearly.

Preference

The browser exposes the user motion setting.

Fallback

CSS adjusts animation and transitions.

Meaning

The still state must communicate the same information.

Scope

Large, looping or spatial motion needs the most care.

Visual model

See the interaction sequence before writing the motion.

Default

Full motion

A panel slides, fades or pulses when allowed.

Detect

Media query

CSS checks prefers-reduced-motion.

Reduce

Less movement

Travel and looping motion are removed or softened.

Preserve

Same meaning

State remains visible without motion.

Good CSS versus fragile CSS

Reduced-motion fallback

.panel { animation: slide-in 360ms ease both; }

@media (prefers-reduced-motion: reduce) {
  .panel { animation: fade-in 120ms ease both; }
}

No escape from motion

.hero-title {
  animation: zoom-spin 900ms ease infinite;
}

Rules of thumb

Motion should guide attention, confirm state and stay out of the way.

Use the media query

prefers-reduced-motion is the CSS hook for the system preference.

Remove spatial travel first

Large movement, zooming, parallax and spinning need the strongest fallback.

Keep information visible

Do not rely on motion alone to explain progress or state.

Do not globally break everything

A heavy-handed reset can accidentally remove useful focus or state transitions.

Simplify instead of always deleting

A fade or instant state change can replace a slide.

Test the preference

DevTools can emulate reduced motion so you can verify the fallback.

Production thinking

Good animation is fast, purposeful, accessible and testable.

Why does this matter?

Reduced motion turns animation from decoration into responsible interface design. It shows that polish and accessibility can live together.

Accessibility

Users who request reduced motion should not be forced through parallax, spinning, zooming or looping decorative movement.

Production note

Create a motion checklist for every animation: purpose, trigger, duration, reduced-motion behavior and performance risk.

SEO note

Accessible pages are more robust pages. The important content should not depend on motion to be understandable.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

Replace the reduced-motion fade with animation: none and compare the result.
Add a looping pulse and decide whether it also needs a fallback.
Explain why the panel content remains understandable without motion.

Practice assignment

Do this before moving to the next lesson.

Create one keyframe animation with spatial movement.
Add a prefers-reduced-motion rule.
Replace movement with a fade or instant state.

HTML CSS

Live preview

Self-check

Before you continue, prove that you understand Reduced Motion.