配了八年 GIF，每次想要暂停它都要靠浏览器插件——今天 CSS 自己会管了

网页里塞了二十张 GIF，加载完的那一刻你才发现——整个页面全在动，根本停不下来。以前只能靠浏览器插件，或者直接改成静态图。今天 CSS 自己会管 GIF 的播放了，一行属性把这件事彻底变了。

image-animation 是 Chrome 152 新放出来的 CSS 属性，专门用来控制 GIF、APNG、WebP 动画的播放状态。它不是控制 CSS 动画，是直接管住 img 标签里的那张图片素材自己。三个值：normal（正常播放）、paused（暂停）、stopped（直接当静态图）。

有什么用？举个最常见的：图片画廊里塞了二十张 GIF，加载完整个页面像迪斯科球。以前的设计师会说「把动画关了」，工程师只能回一句「GIF 本身带的，没法从外部关」。现在直接给容器上一句 image-animation: paused，所有 GIF 全部停在第一帧。用户想看哪个，自己点一下，hover 时切回 running，完美。

另一个高频场景：用户头像用的是动态表情包，但产品说「加载时不能动」。以前要单独把 GIF 转成一帧静态图上传。现在直接 img.avatar { image-animation: paused; }，头像在页面加载过程中就是静态的，加载完了再给一个按钮让用户自己开启动画。这是以前根本做不到的事情。

还有一个被很多人忽视的无障碍问题：WCAG 2.1 明确要求用户能够暂停页面上的动画内容，但 GIF 根本做不到——要么全动要么全停，要么靠插件。现在一行 image-animation: paused，配合 :animated-image 伪类，可以做出「这个图会动，要不要暂停」的原生 UI 控件。.gif-image:animated-image::after { content: "⏸"; cursor: pointer; } 这样的写法，配合 prefers-reduced-motion，直接给减少动画偏好的用户自动停掉所有 GIF。

浏览器支持方面，Chrome 152 首发，Firefox 154 和 Safari 17.4 也在路上。Fallback 也简单：不支持的浏览器直接忽略这个属性，GIF 正常播放，不会出任何问题。

落到下一步：打开 Chrome 152，随便找个有 GIF 的页面，F12 找到那张图，加一句 image-animation: paused 试试效果。如果你的网站图片画廊有 GIF，下个月就可以规划把这个能力接进去了——用户终于可以自己决定什么时候停、什么时候看。