A golden highlight on a button can point to an action; an endless rotation beside a paragraph can compete with reading. The difference is not how expensive an effect looks, but what it does. Before adding animation, finish this sentence: “This movement helps someone understand…” If there is no clear ending, the effect is decoration and should give way to content. This is an editorial decision-making method, not a promise of better sales.
Establish the action before the effect
Consider an article card. Its heading explains the subject, its excerpt gives a reason to read, and a visible link opens the full text. A brief colour change on hover can reinforce that action. But if the link looks like ordinary text without a shimmer, the underlying design needs attention. Check contrast, wording and position first; add movement afterwards. A phone has no persistent mouse hover, so the primary action must remain understandable without it.
Ask three questions
What starts the animation: page load, scrolling or a deliberate action? When does it finish? Will the outcome still make sense without motion? For a menu, the visible open state matters more than a long panel entrance. A completion message needs words rather than a disappearing sparkle alone. In a design checklist, separate decorative effects from those that communicate a change of state. This makes the discussion more useful than a simple exchange of likes and dislikes.
Reduced motion must not remove the experience
MDN describes prefers-reduced-motion as a way to respect a device preference for less non-essential motion. It does not repair a site automatically: designers and developers need to decide on an alternative. Stop a rotation or replace a large travelling transition with an immediate appearance, while retaining labels, access to the menu and clear button states. Do not hide a whole animated block if it also contains useful information. Check JavaScript-driven effects as well as CSS animations.
Give visitors appropriate control
WCAG criterion 2.2.2, Level A, addresses moving information that starts automatically, lasts more than five seconds and appears alongside other content. Under its stated conditions, a way to pause, stop or hide it is required unless the movement is essential. Automatically updating information has separate conditions. This is not a blanket permission for any animation shorter than five seconds. Criterion 2.3.3, Level AAA, separately addresses disabling non-essential animation triggered by interaction. A single toggle does not establish that an entire website conforms to WCAG.
A practical pre-publication check
Follow the same route with ordinary motion settings and with reduced motion enabled: open the menu, read a card, visit an article and return. Check that content remains available and controls retain meaningful states. Repeat with a keyboard and on a phone. Where motion controls exist, check their accessibility and clear labels. Finally, look at the page after a minute of reading: an effect that feels attractive at first may become intrusive. The goal is not to remove the site’s personality, but to let people use it comfortably.