让CSS3无限动画运行并离开页面是不好的。动画仍然无法运行？

我读过某处，（不幸的是我找不到我的源码），如果用户已经加载了一个正在运行的CSS3动画（无限参数）的HTML页面，并且他决定离开它，浏览器（计算机）仍然不必要地播放动画，因此，即使用户离开了页面，CPU（或加速硬件？）仍然适用于动画。让CSS3无限动画运行并离开页面是不好的。动画仍然无法运行？

所以如果有人能回答我，我会很高兴。

这是事实吗？

如果这是真的：

是过渡也关注这个问题？
是否暂停动画（和过渡，如果有关的话）足以避免这个问题？（我正在考虑通过onbeforeunload事件强制暂停）还是应该做另一件事？请注意，我不想使用“悬停”来启动动画/转场。

PS：我还是新来的CSS，javascript和其他语言。对不起，但我的英语知识远非顶尖...

来源

2013-07-05 iwonder

如果用户完全离开页面（例如导航到整个新页面或关闭该页面），那么动画不应该继续运行。如果他们以某种方式不断更新，那是因为浏览器错误，因此无论如何您都不应该担心。

但是，隐藏元素的CSS3动画（例如display: none;）仍然会被评估，因为它们是基于关键帧的，并且未来某个时候可能会有一个关键帧导致元素再次变为可见。

想象一下，想要通过先隐藏盒子然后再次显示并使其闪烁来为盒子制作动画。如果在隐藏方框时CSS过渡会突然变为禁用状态，则动画将停止，并且该方框不会再次出现。这不是你想要的。

注意：可以完成例如分析您的网页。在Chrome中使用开发工具（F12 - >个人资料）。虽然我没有用它来剖析CSS3动画，但我不确定它是否可以完成。然而，你可以看看Chrome自己的任务管理器（Shift-ESC），看看你的网站是否使用了大量的CPU。如果这是真的，那么这表示该页面上可能有太多动画。

来源

2013-07-05 10:35:25

感谢您的解释安德烈。所以我可能会误解我读过的书，而且这样更好！我之所以这样问，是因为当我在多个25px半径点之间调整颜色动画时，再次加载和加载页面以选择我想要的更好效果时，浏览器（chrome）最终非常非常缓慢，几乎冻结了说。因此，我添加了每次重新加载之前使用的暂停按钮，似乎可以解决问题。现在你告诉我，这个问题在其他地方有其起源。谢谢！ – iwonder

我知道CSS3动画，尤其是大型元素，目前在大多数计算机上都很慢。浏览器开发人员在这方面仍有很多工作要做。我实际上记得创建一个简单的，几乎空白的网页，只有一个滚动背景（400x400px，平铺）。动画是用CSS3完成的，只有那个单一的动画（实际上是动画整个背景，但仍然），占用了我CPU的20％左右。行！ –

行！在我的50个颜色变化点下面，我有一个920x150像素的动画渐变盒。这可以解释！ – iwonder

让CSS3无限动画运行并离开页面是不好的。动画仍然无法运行？

回答

相关问题