配了三年 GIF，每次想暂停它都要写一堆 JS——今天一个 CSS 属性把这件事彻底原生化了

你大概没想过这个问题：页面上一个 GIF 在播动画，想让它停下来，你会怎么写？

以前的标准做法是写 JS：先抓到那个 img 元素的引用，然后调 el.pause() 或者 el.play()，再配个点击事件或者 IntersectionObserver 来判断什么时候该停什么时候该播。一顿操作下来，20 行起步。

这件事今天被一个 CSS 属性彻底原生化了。

image-animation 是 W3C CSS Image Animation Module Level 1 规范里的属性，专门用来控制 <img> 元素里动画图片的播放行为。Chrome 154 默认启用，Safari 26 也跟上了，写起来是这样的：

img {
  image-animation: paused;
}

一行，动画图片全部暂停。不需要 JS，不需要 play()/pause()，纯 CSS。

这个属性的取值有三个：normal（默认，动画正常播放）、paused（暂停）和 running（强制播放）。你可以用它做很多事，比如鼠标悬停才播放：

img {
  image-animation: paused;
  filter: grayscale(30%);
}
img:hover {
  image-animation: running;
  filter: none;
}

配合新的 :animated-image 伪类（专门匹配含动画图片的 <img> 元素）一起用，可以精准控制 GIF 动图而不影响普通静态图：

img:animated-image {
  image-animation: paused;
  filter: grayscale(30%) contrast(80%);
}
img:animated-image:hover,
img:animated-image:focus {
  image-animation: running;
  filter: none;
}

:focus 也触播放这个设计很重要——保证了键盘用户不用点鼠标也能激活动画，符合无障碍要求。

实用场景远不止暂停 GIF 这么简单。 用 @media (prefers-reduced-motion) 可以全局关闭用户不想要的动画，只保留关键内容继续播：

@media (prefers-reduced-motion: reduce) {
  :root {
    image-animation: paused;
  }
  .loading-animated-gif {
    image-animation: normal; /* 关键动效保留 */
  }
}

用 running 可以让同一张 GIF 的多个实例在页面上各自独立播放，而不是全部同步到同一个帧。也可以做轮播：滚动到哪张图，哪张图才开始播。

Chrome 154 的 Release Notes 里明确提到这个特性，Safari 26 的 Release Notes 也能看到相关记录。caniuse 的数据显示全球覆盖率已经相当可观。

过去几十年，浏览器里控制动画播放暂停只有 JS API 这一条路。现在这条路上终于有了 CSS 的岔口。你不需要写 20 行 JS 去 pause 一个 GIF，你只需要一行 image-animation: paused。这不是什么宏大的新能力，但它的存在本身说明：CSS 能做的事，比你印象里的要多。