当你在使用@keyframes 动画时,如果做的动画比较复杂的话,就会发现一个问题,那就是不流畅,掉帧,可能在PC端还不是很明显,但在移动端你就会发现严重地掉帧。这是因为,如果@keyframes 改变的属性是与layout相关的话,就会触发重新布局,导致渲染和绘制的时间会更加地长。 所以,我们应该尽可能地使用不会触发重新布局的属性完成我们的动画。
触发重新布局的属性有: width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。
不会出发重新布局的属性有:transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。