CSS动画文字闪烁问题

动画文字闪烁问题

1.动画加载后，浏览器没有发现任何合成因素，因此选择最佳策略：将页面的全面内容绘制再单个背景层上。
2.当执行transition动画的时候，我们明确了将合成添加到元素中-具有tranform属性过度的动画。但是由于隐私合成层的原因，位于动画元素之上的属性会全部提升为合成层。
3.提升到合成层总是会导致重新绘制：浏览器必须为该元素创建一个新的纹理并将其从上一层移除。
4.新增图层之后，必须将新的图层传送到CPU，已获得用户将再屏幕上看到的最终图像合成。这取决与层数，纹理大小和内容的复杂度，重绘和数据传输可能需要大量事件才能执行，这就导致了有时候再动画效果开始或结束的时候看到元素闪烁。
5.动画结束后，我们立即从图层中删除合成的因素。再一次，浏览器发现它不需要再合成上浪费资源，因此它会回到最佳策略：将页面的全部内容保留再单个层上，这意味着它必须再背景层上重新绘制之前的元素（再一次的重绘），之后将更新后的纹理发送给GPU，这也会导致页面闪烁的。

PS: 合成层的优势：

一般一个元素启动硬件加速会变成合成层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。

PS: 层压缩

由于隐式合成的问题，会导致产生大量合成层，而每个合成层都需要小号内存资源，浏览器考虑到页面的性能，所有有了层压缩处理。如果多个渲染层和一个合成层重叠时，这些渲染层会被压缩到一个Graphicslayer(渲染层)中，以防止由于重叠导致可能出现的“层爆炸”。

优化方向：

1.处理额外的重绘(导致数据和传输到GPU)
2.处理额外的内存消耗

解决方法

一、避免隐式合成
1.将动画元素尽量保持较高的位置z-index，理想情况下，这些元素应该是body的直接子代。如果是嵌套较深的情况下，可以克隆元素将其body仅放入动画中。
2.可以在动画属性上先将其提升为合成层，以便动画可以平稳地启动和停止，但缺点就是导致内存消耗增加。

二、使用transfrom 和opcity代替
因为其并不会影响正常的流，所以不会触发重绘和重排，可以使得动画更快，更流畅，但这也会导致隐式的合成，只要是合成提升都会触发重绘，只不过少一点罢了。其优点就是可以大大减少内存消耗。

三、减少复合层的尺寸

四、尽可能使用CSS过度动画
开启3d GPU加速，基于css的动画具有一个非常重要的功能：它完全可以在GPU上运行，
由于声明了动画的开始和结束方式，因此浏览器可以在动画开始之前准备所有必须的指令，
并将其发送到GPU。