让 CSS3 无限动画运行并离开页面是不是很糟糕。动画还在无形中运行吗？答案

【问题标题】：Is it bad to let CSS3 infinite animations running, and leave the page. Is the animation still running invisibly?让 CSS3 无限动画运行并离开页面是不是很糟糕。动画还在无形中运行吗？
【发布时间】：2013-07-03 09:01:20
【问题描述】：

我在某处读到，（不幸的是我再也找不到我的源代码）如果用户加载了一个带有正在运行的 CSS3 动画（无限参数）的 HTML 页面并且他决定离开它，浏览器（计算机）仍然不必要地播放动画，因此，尽管用户离开了页面，但 CPU（或加速硬件？）仍在为动画工作。

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

这是真的吗？

如果是真的：

转换是否也与此问题有关？
暂停动画（如果涉及到过渡）是否足以避免此问题？（我想通过onbeforeunload 事件强制暂停）或者我应该做另一件事吗？请注意，我不想使用“悬停”来启动动画/过渡。

PS：我还是 CSS、javascript 的新手，不知道其他语言。抱歉，我的英语知识还远远不够……

【问题讨论】：

标签： css background-process hardware-acceleration

【解决方案1】：

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

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

想象一下，想要为一个盒子制作动画，首先隐藏它，然后再次显示它并使其闪烁。如果在隐藏盒子时 CSS 过渡突然被禁用，动画将停止并且盒子永远不会再次出现。这不是你想要的。

注意：可以对您的网页进行分析，例如在 Chrome 中使用开发者工具（F12 -> Profiles）。我还没有用它来分析 CSS3 动画，所以我不确定它是否可以完成。但是，您可以查看 Chrome 自己的任务管理器 (Shift-ESC)，看看您的网站是否占用了大量 CPU。如果这是真的，则表明该页面上的动画可能过多。

【讨论】：

感谢您的解释安德烈。所以我可能误解了我之前读过的内容，这更好！我问这个是因为当我在多个 25px 半径点之间调整颜色动画，并再次加载和加载页面以选择我想要的更好的效果时，浏览器（chrome）最后非常慢，几乎冻结了我会说。所以我添加了一个暂停按钮，我在每次重新加载之前使用它，它似乎解决了这个问题。现在你告诉我这个问题起源于其他地方。谢谢！
我知道 CSS3 动画，尤其是大型元素，目前在大多数计算机上都非常慢。浏览器开发人员在这个方向上仍有很多工作要做。我实际上记得创建了一个简单的、几乎空白的网页，只有一个滚动背景（400x400px，平铺）。动画是用 CSS3 完成的，只有一个动画（实际上是为整个背景制作动画，但仍然如此）占用了我大约 20% 的 CPU。
好的！在我的 50 个变色点下方，我有一个 920x150 像素的动画渐变框。这可以解释！
（抱歉输入键太快了）。是否很容易看到页面正在使用的 CPU 量？
是的，我已经更新了我的答案（Chrome 中的 Shift-ESC 会打开 Chrome 的任务管理器）。不过，我不确定实际的 CSS3 动画分析工具。