DocumentTimeline - 表示动画时间轴

DocumentTimeline 是 Web Animations API 的接口，表示动画时间轴，包括默认文档时间轴（通过 Document.timeline 访问）。

构造函数

DocumentTimeline()

创建与当前浏览上下文的活动文档关联的新 DocumentTimeline 对象。

属性

该接口从其父接口 AnimationTimeline 继承其属性。

AnimationTimeline.currentTime

返回该时间轴的时间值（以毫秒为单位）或 null（如果它处于非活动状态）。

实例

我们可以在多个动画中共享一个 documentTimeline ，从而允许我们通过共享时间轴操纵这组动画。这段代码将启动所有猫动画 500 毫秒的动画：

const cats = document.querySelectorAll('.sharedTimelineCat');
const sharedTimeline = new DocumentTimeline({ originTime: 500 });

for (const cat of cats) {
  const catKeyframes = new KeyframeEffect(cat, keyframes, timing);
  const catAnimation = new Animation(catKeyframes, sharedTimeline);
  catAnimation.play(); 
}

规范

规范	状态	备注
Web Animations DocumentTimeline 的定义	工作草案	编者的草稿。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• Web Animations API
• AnimationTimeline
• AnimationTimeline.currentTime
• Document.timeline
• DocumentTimeline.DocumentTimeline()