动画：startTime 属性

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。自以下时间起，它已在各种浏览器中可用 2020年3月.

Animation.startTime 是 Animation 接口的一个双精度浮点数属性，它表示动画播放应开始的计划时间。

动画的开始时间是其 timeline 的时间值，此时其目标 KeyframeEffect 计划开始播放。动画的开始时间最初未解析（这意味着它为null，因为它没有值）。

值

一个浮点数，表示当前时间（以毫秒为单位），如果未设置时间，则为null。您可以读取此值以确定当前设置的开始时间是什么，并且可以更改此值以使动画在不同的时间开始。

示例

在 Web 动画 API 示例：运行 中，我们可以通过为所有新动画的猫赋予与原始正在运行的猫相同的startTime来同步它们。

js
const catRunning = document
  .getElementById("withWAAPI")
  .animate(keyframes, timing);

/* A function that makes new cats. */
function addCat() {
  const newCat = document.createElement("div");
  newCat.classList.add("cat");
  return newCat;
}

/* This is the function that adds a cat to the WAAPI column */
function animateNewCatWithWAAPI() {
  // make a new cat
  const newCat = addCat();

  // animate said cat with the WAAPI's "animate" function
  const newAnimationPlayer = newCat.animate(keyframes, timing);

  // set the animation's start time to be the same as the original .cat#withWAAPI
  newAnimationPlayer.startTime = catRunning.startTime;

  // Add the cat to the pile.
  WAAPICats.appendChild(newCat);
}

降低时间精度

为了防止时序攻击和 指纹识别，animation.startTime 的精度可能会根据浏览器设置进行四舍五入。在 Firefox 中，privacy.reduceTimerPrecision 首选项默认启用，默认为 2 毫秒。您还可以启用 privacy.resistFingerprinting，在这种情况下，精度将为 100 毫秒或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds 的值（以较大者为准）。

例如，在降低时间精度的情况下，animation.startTime 的结果将始终是 0.002 的倍数，或者在启用 privacy.resistFingerprinting 的情况下，是 0.1（或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds）的倍数。

js
// reduced time precision (2ms) in Firefox 60
animation.startTime;
// Might be:
// 23.404
// 24.192
// 25.514
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
animation.startTime;
// Might be:
// 49.8
// 50.6
// 51.7
// …

规范

规范
Web 动画
# dom-animation-starttime

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅