Javascript CSS转换和浏览器选项卡

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

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

但我注意到css转换的行为如下： 当窗口>选项卡>页面>元素有另一个选项卡处于活动状态或窗口最小化时，即使转换未完成，它也会停止

---

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

也许您可以使用后台任务刷新CSS。查看此线程：

为什么要为此使用转换

#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)}
}

---

即使使用制表符开关，这也会使动画流畅无瑕。

这很好，但如果要旋转已具有默认旋转的元素，则必须为每个元素创建一个具有不同于{}值的动画。