当浏览器选项卡暂停时如何防止CSS动画暂停

Question

我有由CSS驱动的移动线动画：

.line {
    transition: all 30s cubic-bezier(0, 0, 0, 1);
    transform: translate3d(-1000px, 0px, 0px);
}

该行在X轴上移动30秒到-1000px。

问题：
当我将浏览器选项卡切换到其他网站时，带有该动画的选项卡上的动画可以设置为暂停，但是当我返回带有该动画的选项卡时，动画将恢复。

我需要的行为
当用户切换浏览器选项卡时，我需要使动画不断移动而不会暂停。

Answer 1

我认为仅CSS不可能做到这一点。出于优化目的，不重绘不活动的浏览器选项卡或窗口。但是，您可以使用JavaScript实时计算已通过多少帧，并使用Page Visibility API跳到正确的帧。

Answer 2

如果我对您的理解正确，那么您需要在用户离开浏览器的当前选项卡后继续动画。 visibilitychange事件将对此有所帮助。我在下面做了通常的示例代码，但是您需要针对您的任务自定义此代码。

我还指定了line.style.animationPlayState = 'running'-在这种情况下，动画的逻辑仍在继续。

let line = document.querySelector('.line');

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState == 'hidden') {
        line.style.animationPlayState = 'running';
  } else {}
});