高效CSS3动画或transition避免reflow

CSS3提供了3D变换的属性,让我们可以操作网页内容在一个3维的空间。并且这些被投射到3D空间的元素也可以使用transition,keyframe实现动画效果。3D变换当然需要浏览器的支持。3D变换中一个关键的属性:Perspective,可以指定给元素,也可以作为transform的属性。Perspective:使用CSS长度表示(px,em,rem等等),它定义了从viewport到3D元素的距离

可以给每个元素设置该属性,每个元素显示跟其它元素不相干,除非我们有意为之。一般推荐针对3D元素的父级设置一个Perspective属性。

在浏览器端有两个昂贵的css操作:repaints(更改了元素的视觉效果)和reflows(更改了元素的布局),为了尽量减少这两个操作(不能完全避免),可以遵循如下规则:

1.直接改变元素本身而不是其父级元素(限制影响范围)

2.避免设置行内样式

3.动画效果使用transform,transition来完成

4.针对固定宽高或使用overflow的元素使用动画

5.避免使用比较深层级来表示选择器(减少计算)

6.避免使用全局选择器(*)

7.指定需要变换的属性代替all

本文参考《Pro CSS3 Animation》

css3
作者:张雪飞
出处:https://zhangxuefei.site/p/1711
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注