浏览器是否会为隐形内容添加动画效果？

Question

当一个页面包含低于折叠的CSS3动画，或者当用户向下滚动时隐藏的CSS3动画时，你应该使用Javascript来停止动画，还是浏览器不为不可见的元素设置动画？

Answer 1

即使浏览器不会绘制视口之外的元素，我仍然非常确定他们会继续更新css动画所确定的css属性，即使元素是不可见。

这是为了能够监听动画事件，或者能够在任何给定时间读取动画css属性的值。

因此，理论上你可以通过删除动画元素的css类来提高性能，但除非你有非常复杂的动画或动画数百个元素，否则我不会真的担心它。

＆＃34;绘图＆＃34;通常是最昂贵的部分，特别是如果您为颜色等动画制作动画，这会导致重绘。但是，如果您使用css变换设置平移或旋转动画，则浏览器通常不需要对每个帧进行重绘。相反，它可以只绘制一次元素并将其作为纹理发送到GPU，并让GPU每帧转换或旋转它，这是疯狂的快速，因为它是所有硬件加速。