CSS 过渡和浏览器选项卡答案

【问题标题】：CSS transitions and browser tabsCSS 过渡和浏览器选项卡
【发布时间】：2013-04-05 03:17:13
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript css window focus transition

【解决方案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)}
}

即使使用标签切换，这也会流畅无瑕地制作动画。

【讨论】：

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

【解决方案2】：

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

【讨论】：