🎬Dev

prefers-reduced-motion CSS

Builds the @media (prefers-reduced-motion: reduce) block that neutralises animations, transitions and smooth scrolling, page-wide or only inside .anima.

Scope

CSS

—

Honouring people who asked for less motion

Entrance animations, smooth scrolling and parallax cause real discomfort for some people: vestibular disorders, migraine with aura and certain forms of epilepsy react badly to on-screen motion. That is why operating systems carry a reduce motion setting, and the browser exposes it to CSS through the prefers-reduced-motion media query.

The page assembles the block that honours that preference. Pick the scope: the whole-page version applies the rule to every element and is the usual recommendation, because it also catches animation from third-party libraries you did not write; the scoped version limits the effect to one class, for when an animation must keep running because it carries information.

Notice the durations do not go to zero, but to a minimum value. That is deliberate: an animation with zero duration may never fire its end event, and code waiting on that event to continue would stall. A hundredth of a millisecond is imperceptible and keeps the event. scroll-behavior is on the list too, because smooth scrolling is one of the most frequent complaints.

Frequently asked questions

Does this switch off every animation on the site?

In the whole-page version, essentially yes — and that is the desired behaviour once someone asked their system for less motion. If some animation is essential to understanding the interface, prefer reducing it to something subtle, such as an opacity transition, rather than keeping it in motion.

How do I test without changing my system?

Through the browser tools: Chrome offers an emulation for prefers-reduced-motion under Rendering, and Firefox has an equivalent option. Changing the actual system setting works too — on macOS it lives under Accessibility, on Windows under Visual effects.

Can I read this from JavaScript?

You can, with matchMedia against the same query, and that is the route when the animation is written in code rather than CSS. It pays to register a change listener: someone may switch the preference on with the page already open, and the right move is reacting immediately.

Related Tools

🎯

Focus-Visible CSS Snippet

Builds a ready-to-paste :focus-visible rule from an outline colour and a thickness in pixels, with 2px offset, for the WCAG 2.4.7 focus indicator.

🔘

CSS Button Generator

Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.

📐

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.

🌬️

Tailwind Config CLI Generator

Generate a ready-to-use tailwind.config.js for the Tailwind CLI, with content paths and theme set up. Copy it and start styling in seconds.

🎨

CSS Formatter

Format and indent CSS code for better readability and maintenance.

🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.