Ошибка анимации CSS в Safari

У меня есть анимация CSS с задержкой, и я приостанавливаю ее во время задержки. Он работает так, как ожидалось, в Firefox и Chrome, "Hello" не перемещается. Однако в Safari анимация переходит к последнему кадру. Почему и как исправить пожалуйста?

function test() {
  var timeout = 1000;
  setTimeout(function() {
    document.getElementById('animation').style.animationPlayState = 'paused';
  }, timeout);
}

document.addEventListener("DOMContentLoaded", test);

#animation {
  animation: test 2s linear 2s;
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>

Ответ 1

Поведение Safari является только ошибкой, когда для тайм-аута установлено значение, меньшее, чем задержка анимации. Итак, обходной путь - установить начальное состояние на paused через animation-play-state, а затем управлять им через JS, как показано ниже:

function test() {
  let el = document.getElementById("animation");
  let timeout = 1000;
  
  // Get the delay. No luck with el.style.animationDelay
  let delay =
    window
      .getComputedStyle(el)
      .getPropertyValue("animation-delay")
      .slice(0, -1) * 1000;

  // Only resume and later pause when timeout is greater than animation delay
  if (timeout > delay) {
    el.style.animationPlayState = "running";
    setTimeout(function() {
      el.style.animationPlayState = "paused";
    }, timeout);
  }
}

document.addEventListener("DOMContentLoaded", test);

#animation {
  animation: test 2s linear 3s;
  animation-play-state: paused; /* Pause it right after you set it */
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>

Ответ 2

Это не ответ на проблему. Однако, если вы удаляете задержку анимации, приостановка и перезапуск анимации работают так, как должно. Кажется, что задержка анимации является причиной проблемы. Возможно, вместо того, чтобы полагаться на css для обработки задержки, программно управляйте задержкой анимации с помощью javascript.

См. ниже: пауза и запуск анимации

function test() {
  var timeout = 1000;
  setTimeout(function() {
    document.getElementById('animation').style.animationPlayState ='paused';
    document.getElementById('animation').style.webkitAnimationPlayState ='paused';
  }, timeout);
  setTimeout(function() {
    document.getElementById('animation').style.animationPlayState='running';
    document.getElementById('animation').style.webkitAnimationPlayState ='running';
  }, timeout * 2);
}

document.addEventListener("DOMContentLoaded", test);

#animation {
    -webkit-animation: test 2s linear;
        animation: test 2s linear;
}

@-webkit-keyframes test {
  to {
    -webkit-transform: translateY(100px);
        transform: translateY(100px);
  }
}

@keyframes test {
  to {
    -webkit-transform: translateY(100px);
        transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>