直接答案:25 站共 641 条 animation、1,157 条 transition、1,132 个 @keyframes;22 站检出动效、20 站使用 keyframes。但只有 7 站出现 prefers-reduced-motion(共 38 个块,全部显式把 animation/transition 设为 none/0),18 站完全没有;另有 2 站使用 scroll-behavior:smooth。7 个支持减少动态的站是 E03、E06、E09、E14、E22、E23、E24;动效最重的是 E17(217 条 transition、86 条 animation、86 个 keyframes)。
本文只读 CSS 声明,不渲染、不执行脚本;JS 动画与 Canvas 不在统计内。
方法:HTML 内联样式 + 前 3 个外链 CSS
2026-11-09 10:41–10:45,对第 4 期 25 个缓存 200 首页实时请求 HTML,读取内联 <style> 与前 3 个外链 CSS;去掉注释后统计 animation:、animation-name:、transition:、@keyframes、prefers-reduced-motion 与 scroll-behavior:smooth。对每个减少动态媒体块做花括号配对,检查是否把 animation/transition 设为 none/0。
| 口径 | 判定 | 边界 |
|---|---|---|
| animation | animation: 与 animation-name: 出现次数 | 不判断类是否被使用 |
| transition | transition: 出现次数 | 含简写与单属性声明 |
| keyframes | @keyframes name 数量 | 不同前缀可能重复计 |
| 减少动态 | prefers-reduced-motion 出现与媒体块 | 块内 none/0 即算禁用,不验证覆盖范围 |
| smooth | scroll-behavior:smooth | 不判断触发方式 |
结果:动效很普遍,减少动态很稀缺
| 指标 | 数量 | 站点数 |
|---|---|---|
| animation 声明 | 641 | 20 |
| transition 声明 | 1,157 | 22 |
| @keyframes | 1,132 | 20 |
| prefers-reduced-motion 查询 | 38 | 7 |
| 其中真正禁用动画 | 38 | 7 |
| scroll-behavior:smooth | 2 | 2 |
动效最重的站点
| 站点 | transition | animation | keyframes | 减少动态 |
|---|---|---|---|---|
| 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 |
7 个支持减少动态的站集中在模板较新的站点,而且只要写了就确实把动画关掉:38 个媒体块全部含 none/0。反过来,E17 虽然有 217 条 transition、86 条 animation,却没有一条减少动态规则;E25 的 CSS 全部来自内联 <style>(262.6 KB),同样没有支持。
对验收的启示
- 尊重 prefers-reduced-motion。 22 个有动效的站里只有 7 个支持;至少覆盖自动播放、大幅位移与循环动画。
- 给 transition 设上限。 1,157 条,E17 一页 217 条;优先保留交互反馈,删除装饰性过渡。
- 清理多余 keyframes。 1,132 个、E03 与 E22 各约 98 个;很多可能从未被引用。
- smooth 滚动跟随偏好。 2 站使用;系统“减少动态”打开时应退回 auto。
- 在系统设置里实测。 打开 Windows/macOS 的减少动态后重新加载页面,确认动画与平滑滚动都停下。企业官网验收可参考网站建设服务。
局限
- 只数 CSS 声明:类可能未被使用,声明数不等于实际播放的动画数。
- 不执行 JS:Web Animations、Canvas 与 requestAnimationFrame 不在统计内。
- 减少动态覆盖未验证:块内 none/0 即算禁用,是否覆盖所有动画需人工确认。
- 抓取边界:E18、E20 未取到 CSS,不计为 0;E25 的 CSS 全部来自内联样式。
- 25 站 pilot:同一批装备企业样本,不外推行业。
数据与复算
匿名数据:equipment-homepage-motion-2026.csv(25 行 × 12 列:CSS 文件数/体积、animation/transition/keyframes、减少动态查询与禁用块、smooth 与时间)。仓库内为 docs/research/2026-11-homepage-motion.csv。
解析:scripts/motion_probe.py;单元测试 scripts/test_content_motion_probe.py(9 项,无网络)。运行:
python -m unittest scripts.test_content_motion_probe
配套:首页焦点样式复测、首页阻塞资源 pilot、首页 HTML 体积组成 pilot、首页设计令牌审计(11 站用变量、0 站支持暗色)。
数据来源与口径
- 样本:第 4 期 25 个缓存为 200 的首页。
- 抓取:2026-11-09 10:41–10:45 Asia/Shanghai,串行,站间 0.5 秒,超时 15 秒。
- 样式:HTML 内联
<style>+ 前 3 个外链 CSS;去掉注释后计数。 - 减少动态:花括号配对媒体块,块内 animation/transition 为 none/0 即算禁用。
常见问题
没有 prefers-reduced-motion 一定是缺陷吗?
不一定。低动效站点可能不需要;但本期 22 站检出动效,其中 15 站没有任何减少动态支持,风险集中在自动播放、大幅位移与循环动画。
声明数等于实际动画数吗?
不等于。本文统计 CSS 声明与 @keyframes,很多类可能未被使用;真正播放取决于 HTML 与脚本。
为什么 7 站的 38 个块都算“禁用”?
块内出现 animation 或 transition 的 none/0 值,说明至少在样式层显式关闭;是否覆盖所有动画仍需人工确认。
smooth 滚动为什么单列?
它有明确的前庭不适风险,且系统“减少动态”打开时也应关闭;本期只有 2 站使用。
JS 动画为什么不算?
本文只读 CSS。Web Animations API、Canvas 与 requestAnimationFrame 需要运行后检测,另做一期。
数据能复核吗?
可以。公开 CSV 25 行 × 12 列;scripts/motion_probe.py 有 9 项离线单测。