直接答案: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 不在统计内。

641
animation
1,157
transition
1,132
keyframes
22
有动效站点
7
支持减少动态
18
没有支持

方法: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。

口径判定边界
animationanimation: 与 animation-name: 出现次数不判断类是否被使用
transitiontransition: 出现次数含简写与单属性声明
keyframes@keyframes name 数量不同前缀可能重复计
减少动态prefers-reduced-motion 出现与媒体块块内 none/0 即算禁用,不验证覆盖范围
smoothscroll-behavior:smooth不判断触发方式

结果:动效很普遍,减少动态很稀缺

指标数量站点数
animation 声明64120
transition 声明1,15722
@keyframes1,13220
prefers-reduced-motion 查询387
其中真正禁用动画387
scroll-behavior:smooth22

动效最重的站点

站点transitionanimationkeyframes减少动态
E1721786860
E0314025997
E2213024986
E2310612946
E069910956
E258528300

7 个支持减少动态的站集中在模板较新的站点,而且只要写了就确实把动画关掉:38 个媒体块全部含 none/0。反过来,E17 虽然有 217 条 transition、86 条 animation,却没有一条减少动态规则;E25 的 CSS 全部来自内联 <style>(262.6 KB),同样没有支持。

对验收的启示

  1. 尊重 prefers-reduced-motion。 22 个有动效的站里只有 7 个支持;至少覆盖自动播放、大幅位移与循环动画。
  2. 给 transition 设上限。 1,157 条,E17 一页 217 条;优先保留交互反馈,删除装饰性过渡。
  3. 清理多余 keyframes。 1,132 个、E03 与 E22 各约 98 个;很多可能从未被引用。
  4. smooth 滚动跟随偏好。 2 站使用;系统“减少动态”打开时应退回 auto。
  5. 在系统设置里实测。 打开 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 站支持暗色)。

数据来源与口径

  1. 样本:第 4 期 25 个缓存为 200 的首页。
  2. 抓取:2026-11-09 10:41–10:45 Asia/Shanghai,串行,站间 0.5 秒,超时 15 秒。
  3. 样式:HTML 内联 <style> + 前 3 个外链 CSS;去掉注释后计数。
  4. 减少动态:花括号配对媒体块,块内 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 项离线单测。

关于作者

凌壹信息Official(交付团队),负责企业网站、品牌与智能制造项目的需求梳理、方案与验收协作。本文只统计 CSS 动效声明与减少动态媒体块,不渲染、不执行脚本;22 站检出动效,属 pilot,不外推行业。

动效也要能关掉

动画与平滑滚动对部分用户会造成不适;系统“减少动态”打开时,页面应该安静下来。

预约内容验收方案