Анимация: свойство startTime

Свойство Animation.startTime интерфейса Animation представляет собой значение с двойной точностью, которое указывает запланированное время начала воспроизведения анимации.

Время начала анимации — это значение времени в её timeline, когда планируется начать воспроизведение целевого KeyframeEffect. Время начала анимации изначально не определено (означает, что оно null потому что у него нет значения).

Число с плавающей точкой, представляющее текущее время в миллисекундах, или null если время не задано. Вы можете прочитать это значение, чтобы определить текущее установленное время начала, и изменить это значение, чтобы анимация начала воспроизведение в другое время.

В примере Работа с API веб-анимаций, мы можем синхронизировать все новые анимированные котов, задав им одинаковое startTime как у оригинального бегущего кота:

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 или кратен 0,1 (или privacy.resistFingerprinting.reduceTimerPrecision.microseconds) с включенным privacy.resistFingerprinting.

// 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
// …

• API веб-анимаций
• Animation
• Animation.currentTime для текущего времени анимации.