css 动画 @keyframes

作者: 树袋熊熊 | 来源:发表于2018-02-24 14:27 被阅读0次

http://blog.csdn.net/Cherishor/article/details/51100303

动画性能优化

当你在使用@keyframes 动画时，如果做的动画比较复杂的话，就会发现一个问题，那就是不流畅，掉帧，可能在PC端还不是很明显，但在移动端你就会发现严重地掉帧。这是因为，如果@keyframes 改变的属性是与layout相关的话，就会触发重新布局，导致渲染和绘制的时间会更加地长。所以，我们应该尽可能地使用不会触发重新布局的属性完成我们的动画。

触发重新布局的属性有： width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。

不会触发重新布局的属性有：transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。