Question

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

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

但是我注意到css转换的行为如下：即使在窗口＆gt;的情况下未完成转换，它也会停止。标签＆gt;页面＆gt; element有另一个选项卡处于活动状态或窗口是否已最小化。

所以jquery继续，但过渡停止，使旋转速度增加。当选项卡未聚焦时，停止增加旋转的jquery函数会有所帮助，但不能完全解决问题，因为在元素“可见”但选项卡未聚焦的情况下（想到选项卡已打开但上面的另一个程序处于活动状态）浏览器或浏览器的另一个窗口可能在一个图块中打开）转换继续进行但jquery计时器停止，使得圆圈最终停止。

Answer 1

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

Answer 2

为什么要使用此转换？

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

即使使用制表符开关，也可以顺畅无瑕地制作动画。

CSS转换和浏览器选项卡

2 个答案: