Direct answer: the 25 sites carry 641 animation declarations, 1,157 transitions and 1,132 @keyframes; 22 show motion and 20 use keyframes. Yet only seven sites include prefers-reduced-motion (38 blocks, all explicitly setting animation/transition to none/0) and 18 have none at all; another two use scroll-behavior:smooth. The seven supporting sites are E03, E06, E09, E14, E22, E23 and E24; the heaviest is E17 (217 transitions, 86 animations, 86 keyframes).
This study reads CSS declarations only; it does not render or execute scripts, so JS animations and Canvas are out of scope.
Method: inline styles plus the first three external CSS files
On 2026-11-09 between 10:41 and 10:45 we requested the HTML of the same 25 cached-200 homepages, read inline <style> blocks and the first three external stylesheets, stripped comments and counted animation:, animation-name:, transition:, @keyframes, prefers-reduced-motion and scroll-behavior:smooth. Each reduced-motion media block is brace-matched and checked for animation/transition set to none/0.
| Measure | Rule | Boundary |
|---|---|---|
| animation | Occurrences of animation: and animation-name: | Class usage not checked |
| transition | Occurrences of transition: | Shorthand and longhand both count |
| keyframes | Count of @keyframes name | Prefixes may double count |
| Reduced motion | Occurrences and media blocks with prefers-reduced-motion | none/0 in a block counts as disabling, coverage not verified |
| smooth | scroll-behavior:smooth | Trigger not checked |
Result: motion is common, reduced motion is rare
| Measure | Count | Sites |
|---|---|---|
| animation declarations | 641 | 20 |
| transition declarations | 1,157 | 22 |
| @keyframes | 1,132 | 20 |
| prefers-reduced-motion queries | 38 | 7 |
| of which actually disable motion | 38 | 7 |
| scroll-behavior:smooth | 2 | 2 |
Heaviest motion sites
| Site | Transitions | Animations | Keyframes | Reduced motion |
|---|---|---|---|---|
| E17 | 217 | 86 | 86 | 0 |
| E03 | 140 | 25 | 99 | 7 |
| E22 | 130 | 24 | 98 | 6 |
| E23 | 106 | 12 | 94 | 6 |
| E06 | 99 | 10 | 95 | 6 |
| E25 | 85 | 28 | 30 | 0 |
The seven supporting sites are concentrated among newer templates, and when they do it they mean it: all 38 media blocks contain none/0. Conversely, E17 has 217 transitions and 86 animations but no reduced-motion rule at all; E25 keeps its CSS entirely in one inline <style> block (262.6 KB) and offers no support either.
What this means for acceptance
- Honour prefers-reduced-motion. Only seven of the 22 sites with motion support it; cover autoplay, large movement and looping animation at minimum.
- Cap transitions. 1,157 in total, 217 on E17 alone; keep interaction feedback and drop decorative transitions.
- Trim unused keyframes. 1,132, with about 98 each on E03 and E22; many may never be referenced.
- Make smooth scrolling follow the preference. Two sites use it; fall back to auto when the OS reduced-motion setting is on.
- Test with the OS setting. Turn on Reduce Motion in Windows or macOS, reload, and confirm animations and smooth scrolling stop. See the website development service.
Limits
- CSS declarations only: classes may be unused, so the count is not the number of animations that actually play.
- No JavaScript: Web Animations, Canvas and requestAnimationFrame are not counted.
- Coverage not verified: none/0 in a block counts as disabling; whether every animation is covered needs a manual check.
- Fetch boundary: E18 and E20 returned no CSS and are not counted as zero; E25 keeps all CSS inline.
- 25-site pilot: the same equipment-company sample; no industry claim.
Data and reproduction
Anonymised data: equipment-homepage-motion-2026.csv (25 rows × 12 columns: CSS files and size, animation/transition/keyframes, reduced-motion queries and disabling blocks, smooth scrolling and time). The repository keeps docs/research/2026-11-homepage-motion.csv.
Parser: scripts/motion_probe.py; unit tests: scripts/test_content_motion_probe.py (9, offline). Run:
python -m unittest scripts.test_content_motion_probe
Related: the homepage focus-style recheck, the homepage blocking-resource pilot, the homepage HTML weight composition pilot, and the homepage design-token audit (11 sites use variables, none supports dark mode).
Sources and definitions
- Sample: the 25 study-4 homepages cached as 200.
- Fetch: 2026-11-09 10:41–10:45 Asia/Shanghai, serial, 0.5 s apart, 15-second timeout.
- Styles: inline
<style>plus the first three external stylesheets; comments stripped before counting. - Reduced motion: brace-matched media blocks; animation/transition set to none/0 counts as disabling.
Frequently asked questions
Is missing prefers-reduced-motion always a defect?
Not necessarily. Low-motion sites may not need it; but 22 sites in this sample have motion and 15 of them offer no reduced-motion support, with risk concentrated in autoplay, large movement and looping animation.
Do declaration counts equal actual animations?
No. This study counts CSS declarations and @keyframes; many classes may be unused, and what actually plays depends on the HTML and scripts.
Why count the seven sites' 38 blocks as disabling?
Each block contains animation or transition with none/0, so the style layer explicitly turns motion off; whether it covers every animation still needs a manual check.
Why call out smooth scrolling?
It carries a clear vestibular risk and should also be disabled when the OS reduced-motion setting is on; only two sites use it here.
Why are JS animations excluded?
This study reads CSS only. Web Animations, Canvas and requestAnimationFrame need a runtime check, which is a separate study.
Can the data be re-checked?
Yes. The public CSV has 25 rows by 12 columns, and scripts/motion_probe.py has 9 offline unit tests.