css - 让 CSS3 无限动画运行，离开页面是不是不好。动画还在无形中运行？

Question

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

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

这个事实是真的吗？

如果这是真的:

1. 过渡是否也与这个问题有关？

2. 暂停动画(如果需要的话还有过渡)是否足以避免这个问题？ (我想用 onbeforeunload 事件强制暂停)或者我应该做另一件事吗？请注意，我不想使用“悬停”来启动动画/过渡。

PS:我在 CSS、javascript 方面还是个新手，对其他语言一窍不通。抱歉，我的英语知识还远远不够......

Answer 1

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

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

想象一下，想要通过首先隐藏它然后再次显示它并使其闪烁来为它设置动画。如果在框隐藏时 CSS 过渡突然禁用，则动画将停止并且框将永远不会再次出现。这不是您想要的。

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