CSS过渡和浏览器选项卡

Question

这是一个非常奇怪的问题：

我有一个圆，它通过CSS旋转过渡保持无限旋转，为了让它无限旋转，我使用jquery将每30秒旋转一次的值更改为一个更大的值。我发现这在视觉上比完整的CSS解决方案更流畅。

然而，我注意到css转换的行为是这样的:当window > tab > page > element有另一个激活的选项卡或者窗口被最小化时，即使转换没有完成，它也会停止。

所以jquery继续，但转换停止，使旋转速度增加。停止jquery函数在选项卡未被聚焦时增加旋转是有帮助的，但不能完全解决问题，因为在元素“可见”但选项卡未被聚焦的情况下(想想打开的选项卡，但另一个程序在浏览器上方是活动的，或者浏览器的另一个窗口是打开的，可能是在磁贴中)，转换继续进行，但jquery计时器停止，使循环最终停止。

Answer 1

为什么要对此使用转换？

#yourElement {
    animation:spin 10s linear;
    -webkit-animation:spin 10s linear;
}
@keyframes spin {
    from {transform:none}
    to {transform:rotate(360deg)}
}
@-webkit-keyframes spin {
    from {-webkit-transform:none}
    to {-webkit-transform:rotate(360deg)}
}

这将使动画流畅而完美，即使使用tab开关也是如此。

Answer 2

也许您可以使用后台任务来刷新CSS。看看这个帖子：Execute Background Task In Javascript