每次想让某个 GIF 暂停都只能靠浏览器全局开关——今天 CSS 用一个属性把它精确到每一张图片

每次想让某个 GIF 暂停都只能靠浏览器全局开关——今天 CSS 用一个属性把它精确到每一张图片。

GIF 和 APNG 动画一直是 CSS 的盲区：开发者可以控制几乎所有视觉元素的渲染行为，唯独管不了图片什么时候播、什么时候停。要么靠浏览器设置，要么靠 JS 把 GIF 转成 canvas 逐帧重绘——没有中间选项。

Chrome 152 正式把 CSS Image Animation Module Level 1 带到了稳定版，第一次让 CSS 能精确控制任意图片的动画播放状态。

两个 API：一个属性 + 一个伪类

image-animation 属性控制播放行为，接受三个值：

• normal：默认行为，动画正常播放
• paused：动画暂停，保持当前帧
• running：恢复播放

:animated-image 伪类匹配当前文档中正在播放动画的图片元素，可以用来统一识别、自动加样式或绑定交互。

Before / After：这段代码之前根本跑不通

Before（CSS 层面完全无能为力）：

/* 没有任何标准方式可以让特定图片暂停 */
img.avatar { /* 能控制尺寸、边框、滤镜，唯独管不了动画 */ }

想要暂停一个 GIF？只能写 JS 用 canvas 逐帧重绘，或者依赖浏览器扩展的全局设置。

After（Chrome 152+）：

/* 一行让页面所有 GIF 暂停播动画 */
:root {
  image-animation: paused;
}

/* 必要动画保留播放（比如加载指示器） */
.loading-indicator {
  image-animation: running;
}

/* 悬停时播放，移开暂停 */
img[data-animatable] {
  image-animation: paused;
}
img[data-animatable]:hover,
img[data-animatable]:focus {
  image-animation: running;
}

/* :animated-image 识别动画图片并统一加交互样式 */
:animated-image {
  cursor: pointer;
  outline: 2px solid Highlight;
}

配合 prefers-reduced-motion 可以实现精细的无障碍降级：

<style>
@media (prefers-reduced-motion: reduce) {
  :root {
    image-animation: paused;
  }
  /* 必要动画在 reduced-motion 模式下也要播，手动保留 */
  .essential-animation {
    image-animation: running;
  }
}
</style>

image-animation 可作用于 <img> 内容图和 CSS background-image 装饰图，属性会同时影响同一元素上的所有动画图片。

规范来源

CSS Image Animation Module Level 1 于 2026 年 6 月 26 日通过 Chromium Intent to Ship，Chrome 152 桌面版和 Android 版同步稳定，支持全部功能。W3C 规范地址：https://drafts.csswg.org/css-image-animation-1/。

接下来可以做什么

在一个有多张 GIF 的内容页试试：image-animation: paused 配合 :animated-image 统一给动画图片加播放图标，悬停显示 controls——比 canvas 重绘方案少写几十行 JS，CSS 一行搞定。