你的 GIF 播了三遍用户还没找到暂停键——这件事今天被 CSS 一个属性彻底管了

你的 GIF 播了三遍用户还没找到暂停键——这件事今天被 CSS 一个属性彻底管了

WCAG 2.2 的要求白纸黑字：自动播放超过 5 秒的动画内容，必须给用户提供暂停、停止或隐藏的手段。但现实是，前端工程师对此毫无办法——CSS 能管动画帧、管颜色、管布局，唯独管不了 GIF 什么时候停。Chrome 154（2026 年 9 月 9 日稳定版）把这件事用两个新 API 彻底补上了：image-animation 属性和 :animated-image 伪类，一行 CSS 直接控制 GIF/APNG 的播放状态。

旧世界：三行代码换一个暂停按钮

在 image-animation 出现之前，控制 GIF 播放状态基本靠这几个方案：

第一，用 JavaScript 监听用户交互事件，动态切换 src 属性——把 GIF 换成静态图就「暂停」了，把静态图换回 GIF 就「继续」了。第二，借助 play() promise（仅部分浏览器支持且不稳定）。第三，彻底放弃控制，告诉用户「请在浏览器设置里关闭动画」。第四，用 pause 库或者把 GIF 切成 CSS 动画来替代原生 GIF。

每种方案都有代价：切换 src 需要预加载两张图，内存翻倍；play() promise 兼容性堪忧；用户设置是全局的，你的页面管不着。

新世界：一行 CSS，暂停或播放

Chrome 154 引入的 CSS Image Animation 模块给了开发者真正的控制权：

三档取值语法：

• image-animation: paused —— 强制暂停
• image-animation: running —— 强制播放
• image-animation: normal —— 默认行为

最常用的是 paused——把它写进你的无障碍适配层，用户偏好设置一条媒体查询就覆盖了：

在 @media (prefers-reduced-motion: reduce) 块里给 img 设 image-animation: paused，用户系统开启了减少动画偏好时，页面自动暂停所有 GIF。

:animated-image：只管会动的图

image-animation: paused 本身是安全的——对 PNG/JPG 静态图设置它，浏览器直接忽略，没有任何副作用。但如果想在语义层面区分「这张图是 GIF」和「这张图是静态图」，:animated-image 伪类就是答案：只有当 img 实际加载了动画图片（GIF、APNG、WebP 动画帧）时才会匹配。

只有在加载了动画图片时才暂停，避免对静态图做无意义的处理——这对大量图片混排的页面尤其有用。

controlled 取值是 Chrome 独有的扩展：让浏览器在动画图片上自动叠加一个原生的暂停/播放控件，开发者无需写任何 JavaScript，用户点击即可切换状态。

生产落地：你的页面真的 WCAG 2.2 合规了吗

WCAG 2.2 Success Criterion 2.2.2（Pause, Stop, Hide）在 2023 年正式加入 AA 级要求，但实际合规检查大量网站仍然不达标——首页横幅里循环播放的营销 GIF、仪表盘里持续闪烁的数据可视化、文档页里自动播放的产品演示图，都是潜在的合规风险。

CSS Image Animation 让这个问题的修复成本从「写 JavaScript 播放器」变成「加一行 CSS」：

所有超过 5 秒循环的营销 GIF，直接加 image-animation: paused；有交互场景的图，用 :animated-image 配合 :hover 变成用户点击后才播放。

下一步：现在就加这一行

image-animation 已随 Chrome 154（2026 年 9 月 9 日）稳定发布，桌面和 Android 同步支持。Firefox 和 Safari 尚未表态支持，属于渐进增强场景——不支持的浏览器会按默认行为（GIF 自动播放），不会报错或破坏功能。

建议行动清单：

第一步（立即）：在全局 CSS 的 @media (prefers-reduced-motion) 块里加上 image-animation: paused，覆盖所有动画图片
第二步（本周）：扫描站内所有自动播放的 GIF，对超过 5 秒循环的营销图加 image-animation: paused
第三步（可选）：用 :animated-image 替代 class 选择器，实现精准控制，避免对静态图做无效处理

WCAG 2.2 合规不需要 JavaScript 播放器，一行 CSS 就够了。