Short answer: Website animation should help people follow what is happening: feedback, a change of state, or where something came from. Keep most of it between 100 and 400 milliseconds. Anything that moves by itself for more than five seconds needs a way to pause, stop or hide it. Visitors who turn on reduce motion should get a still page.
What animation is for on a website
NN/g says interface animation must be unobtrusive, brief and subtle. Its jobs are feedback, showing a change of state, giving a sense of place, and hinting at how an element behaves.
Motion grabs attention, because our peripheral vision is built to notice it. That is also why irrelevant motion annoys people: it is hard to stop looking at it, as anyone who has seen a moving ad knows.
How long an animation should last
NN/g puts simple feedback, such as a checkbox or a toggle switch, at about 100 milliseconds. Bigger changes, such as a modal window sliding in, can take 200 to 300 milliseconds.
At 500 milliseconds, animations start to feel like a drag. In most cases NN/g recommends 100 to 400 milliseconds, with 400 already very slow. Things entering the screen can move a little slower than things leaving it.
Easing matters too. NN/g recommends an ease-out most of the time, because linear motion tends to look unnatural.
| Motion | Rule | Source |
|---|---|---|
| Button or toggle feedback | About 100 milliseconds | NN/g |
| A panel or modal opening | 200 to 300 milliseconds | NN/g |
| Anything that moves by itself next to other content | Stop it within five seconds, or let people pause, stop or hide it | W3C, Level A |
| Motion that a click or scroll starts | Let people turn it off, unless it is essential | W3C, Level AAA |
| Visitors with reduce motion on | Read it with prefers-reduced-motion and cut extra motion | MDN |
Timings from NN/g, rules from the W3C and documentation from MDN, read November 4, 2026.
Motion and accessibility
The W3C’s Level A rule on moving content covers anything that moves, blinks or scrolls by itself for more than five seconds next to other content. People need a way to pause, stop or hide it, unless the motion is essential.
A stricter Level AAA rule says motion that an interaction starts, such as a scroll effect, should be possible to turn off, unless it is essential. The W3C notes that animation can cause nausea and migraines in people with vestibular disorders.
Browsers pass the reduce motion setting to your site through prefers-reduced-motion. MDN explains that it detects a setting meant to minimize non-essential motion, and that scaling or panning large objects can trigger vestibular problems.
How to keep animation fast
web.dev recommends moving elements with transform, and avoiding any property that triggers layout or paint unless you need it. It also advises using will-change sparingly, and only when you hit a performance problem.
How to animate your website
- Give each animation a job: feedback, a change of state or a sense of place.
- Keep most animations between 100 and 400 milliseconds, with an ease-out.
- Animate transform and opacity rather than size or position properties.
- Stop anything that loops within five seconds, or add a pause button.
- Turn motion that isn’t essential off for visitors with reduce motion on.
- Make sure motion never moves the layout or covers text.
- Test with reduce motion on, at phone widths and on a slow phone.
Our cumulative layout shift guide covers the layout part. Our accessibility checker guide covers the rest of the checks.
How our own site handles motion
We checked our pages as a visitor on November 4, 2026. In its first second, our home page runs 19 looping animations; at six seconds, only the moving strip and the photo wall still move.
A Pause motion button at the start of the strip stops both with one click, and the site remembers the choice. On a guide, our pricing, PPC and contact pages, five to nine loops run at first and none at six seconds.
With reduce motion on, nothing moves on those pages and the pause button doesn’t show. Our default transition lasts 180 milliseconds.
We fixed four gaps on November 4, 2026, while preparing this guide: a blinking dot ignored reduce motion, nothing could be paused, decorative loops never stopped, and a typing effect pushed the text below it a few pixels.
Before you publish an animated page
- Every animation has a job.
- Most last 100 to 400 milliseconds.
- Nothing loops past five seconds without a pause.
- Reduce motion leaves a still page.
- Motion never moves the layout.
- Animations use transform and opacity.
RememberMotion should explain, not decorate. Keep it short, let people pause it, and give a still page to anyone who asks for one.
If you want a site whose motion helps instead of distracting, our web design service can build and test it with you.
Quick answers about website animation
How long should a website animation last?
Usually between 100 and 400 milliseconds, NN/g says. Simple feedback, like a toggle switch, needs about 100. A modal sliding in can take 200 to 300. At 500 milliseconds, animations start to feel like a drag.
Do animations slow down a website?
They can. web.dev recommends animating transform and opacity, and avoiding any property that triggers layout or paint unless you really need it. Use will-change sparingly, and only when you hit a performance problem.
What is prefers-reduced-motion?
It is a CSS media feature that tells your site a visitor turned on reduce motion. MDN explains that it detects a setting meant to minimize non-essential motion. Use it to remove or tone down your animations for those visitors.
Do I have to let visitors pause animations?
The W3C’s Level A rule covers anything that moves, blinks or scrolls by itself for more than five seconds next to other content. It asks for a way to pause, stop or hide it, unless the motion is essential. Stopping it within five seconds also works.
Are scroll animations bad for accessibility?
Not by themselves, but they can cause nausea or migraines in people with vestibular disorders, the W3C notes. Its Level AAA rule asks that motion started by an interaction can be turned off. Respecting reduce motion covers most of it.
Sources
Read on November 4, 2026. NN/g: The Role of Animation and Motion in UX and Executing UX Animations: Duration and Motion Characteristics. W3C Web Accessibility Initiative: Understanding Success Criterion 2.2.2: Pause, Stop, Hide and Understanding Success Criterion 2.3.3: Animation from Interactions. MDN: prefers-reduced-motion. web.dev: How to create high-performance CSS animations. Our own case: our pages read in a browser on November 4, 2026.