# Made reduced‑motion honest after finding eleven selectors still animating under the preference, because a universal transition‑none rule loses on specificity to any rule carrying a class. 2025 **Situation.** The site honoured the reduce‑motion preference with a single rule turning off every transition. It read as complete, it lints clean, and under an emulated reduce‑motion preference eleven selectors were still animating. **Task.** The preference had to be honoured in fact, and the reason the obvious rule failed had to become something the next person cannot repeat. **Action.** The cause is specificity. A universal rule scores at the bottom of the cascade and loses to any rule carrying a class, so a blanket transition‑none is beaten by every considered animation on the page — which is every animation worth turning off. The fix was structural rather than a patch: anything that moves now lives in one late stylesheet part, and a linter fails a transitioned transform anywhere else. The distinction the rule draws is deliberate and narrower than the obvious one: reduce motion, not colour. A colour fade is not motion and turning it off makes interfaces feel broken to people who did not ask for that, so a transition listing colour properties passes and a transition on movement does not. Motion is also required to be expressed as a transition rather than a keyframe animation, because the former is trivially cancellable and the latter is not. Two related traps came out of the same work and are recorded with measurements: a menu ornament was thirty‑one degrees through a sixty‑degree turn before it was half visible, and because the shape is periodic a half‑turn looks identical for a third of the cost; and five different properties each make an element the containing block for anything positioned relative to the viewport, which had silently shrunk a dismiss layer to a fraction of the screen. **Result.** The preference is honoured in fact rather than in intent, and eleven live animations that a blanket rule appeared to have covered are actually covered. The general lesson is the one written at the top of that document: a rule that loses on specificity fails silently, and every report calls it something else. --- - Role: Design Systems Engineer - Categories: [Frontend Engineering](https://engineer.company/categories/frontend/), [Web Development](https://engineer.company/categories/web-development/), [Testing & QA](https://engineer.company/categories/testing/), [Design Systems & UI](https://engineer.company/categories/design-systems/), [UX / UI Design](https://engineer.company/categories/ux-ui/) - Services: [Frontend Development](https://engineer.company/services/frontend-development/), [Website Development & CMS](https://engineer.company/services/web-development/), [UI/UX Design & Design Systems](https://engineer.company/services/ui-ux-design/)