CSS 图像动画模块 第一版

1. 引言

2. 控制图片动画：image-animation 属性

该属性允许作者控制 动画图片 以动画状态显示 或保持暂停。

此属性会影响 内容图片和装饰图片。 当一个元素包含多个装饰图片 （如多重背景图片或边框图像）， 或者既有内容图片又有一个或多个装饰图片时， 该元素上的属性计算值会同时影响它们。

注：因此无法只暂停 元素上的装饰图片动画， 而让同一元素的内容图片动画继续， 反之亦然。

对于非动画图片， 此属性的不同值无效。 此属性同样不影响视频或编程生成图片。

当此属性应用于根元素时， 对背景装饰图片的影响会传递到画布背景中。

注：由于历史原因， background属性不仅从根元素继承， 也会从 HTML body 元素继承。 但较新的属性如image-animation仅从 根元素传播。 设置于 body 不会生效， 即使背景属性设置在这里。

normal

动画图片的动画按正常方式运行， 以图片格式和宿主语言决定。

此外， 所有具有相同绝对URL、 相同图片数据且 image-animation计算值为 normal的 动画图片 必须以同一时间线为组同步渲染， 该时间线开始于组中最早添加的时间。

注：上述要求基于[HTML]渲染期望，在 HTML § 15.4.2 图像中定义。 由于[HTML]通常不要求 用户代理以特定方式展示文档，因此没强制该行为。 本规范则要求如此。

stopped

动画图片 渲染为静态图片： 用户代理不得播放其任何动画。 若图片包含封面帧， 则必须使用该帧； 否则显示动画初始状态的图片。

paused

用户代理不得运行 动画图片中的动画， 并必须继续显示 本值应用时图像的状态， 实现动画暂停效果。

如果在应用该值前动画未播放， 行为与stopped 相同。

running

与normal类似， 动画图片的动画正常运行， 由图片格式及宿主语言决定。

但动画的时间轴按元素单独划分： 在同一元素的内容图片 及装饰图片中， 具有相同绝对URL、 相同图片数据且 image-animation计算值为 running 的动画图片， 必须在本元素内同步渲染成同一时间线为组， 该组与其它元素的图片时间线独立。

若在计算值为running 时有图片加入到元素， 则时间线自该组中最早加入时开始计时。

若元素因 display: none 后新创建或显现，有图片已添加并且 image-animation 已为running， 那么时间线从元素参与布局时开始。

若此属性由其他值切换为running， 则时间线起点应 保证动画从切换时的状态继续。

:root { /* 通过继承传播到整个文档 */
  image-animation: paused;
}
img {
  image-animation: normal;
}

image-animation属性不仅影响光栅图片格式， 也影响矢量图片， 包括 SVG（见[SVG2]）。 不过，仅适用于作为内容图片或装饰图片加载的独立 SVG 资源， 不包括内联到 HTML 的 svg 元素。 （但若设置于 svg 元素本身， 则可继承， 并影响其通过 SVG image 元素加载的 动画型 内容图片。 ）

3. 区分动画图片：:animated-image 伪类

:animated-image伪类表示已加载内容图片元素 其中包含动画图片。 若要与animated-image伪类匹配， 图像不仅需为支持动画的格式， 还必须真的是一张动画图片。

对于非内容图片的元素， animated-image伪类永不匹配。

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

function setImageFocusability(event) {
  var img = event.target;
  if (img.matches(":animated-image") {
    img.tabIndex = 0;
  } else {
    img.removeAttribute("tabindex");
  }
}
document.querySelectorAll("img").forEach( (i) => {
  setImageFocusability({target: i });
  i.addEventListener('load', setImageFocusability);
  i.addEventListener('error', setImageFocusability);
});

是否与:animated-image匹配不受 当前图片播放状态和image-animation值影响。 但若用户代理全局禁用图片动画， 即使本可动画的图片也会视为静态图片，不会匹配。

4. 术语

静态图片

仅显示单帧作为最终观看体验的图片。

JPEG 图片是一种静态图片。

动画图片

最终观看体验需顺序显示多帧的图片， 可以循环也可以不循环。

动画 PNG 图片或动画[GIF]图片 都是动画图片。

仅支持渐进渲染或多遍加载 并不属于动画。

内容图片

宿主语言中表示静态图片 或动画图片的元素， 不包括视频或编程图片。

img [HTML] 元素， 包括嵌套于 picture 元素时； object [HTML] 元素（如果其表示一个图片）； 以及 image [SVG2] 元素 都是内容图片。

当且仅当它作为封面帧时， HTML video 元素 被视为内容图片。

装饰图片

通过 CSS 插入文档渲染流程的图片， 如 background-image 或 border-image 等属性添加。

视频

宿主语言中表示动态画面（可带音频或不带音频）， 通常甚至带有交互控件 （播放、暂停、定位、音量、全屏等）， 也可有字幕或说明文字的元素。

注：从文件格式角度， 视频和动画图片概念重叠广泛， 原则上未必能严格区分。 此处区别基于作者意图， 取决于文档中选用的元素。

video [HTML] 元素代表一个 视频。

假定用户代理两种用法皆支持， 同一个 video/mp4 文件 如果通过 video 元素展示就是视频， 如果用作 CSS background-image，则为装饰图片。

编程图片

通过宿主语言 API 编程生成的图片， 而非外部资源加载图片。

canvas [HTML] 元素代表 编程图片。

封面帧

一些动画图片 格式允许创作者指定一个静态图片， 在本规范中称为封面帧， 用于动画未播放时显示， 明确区别于动画的初始状态。

5. 无障碍性考虑

6. 隐私 考虑

7. 安全 考虑