javascript - CSS 过渡和浏览器选项卡

Question

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

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

但是我注意到 css transition 的行为是这样的:即使在 window > tab > page > element 有另一个选项卡处于事件状态或窗口最小化时转换未完成，它也会停止。

所以 jquery 继续，但转换停止，使旋转速度增加。停止在选项卡未聚焦时增加旋转的 jquery 函数有帮助，但不能完全解决问题，因为在元素“可见”但选项卡未聚焦的情况下(想想选项卡打开但另一个程序在上面处于事件状态)浏览器，或者浏览器的另一个窗口可能在一个 tile 中打开)过渡继续进行但 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)}
}

即使使用标签切换，这也能流畅、完美地制作动画。