CSS微动画 - Animation会影响网页效能！

Q: 今天的好像没有范例？
A: 文长慎入，但有看有差！！

动画不能只是动画，还要动得不费力

上一篇有提到在做动画时，改变不同的属性在重新渲染画面时的成本会不相同。本篇要来特别针对上一篇提到的内容详细讲述一下。

画面渲染

当画面在渲然时会经过以下步骤：

1. 会先「计算样式」计算出元素的尺寸及间距等样式。
2. 透过第一步计算出来的样式来进行「布局」。
3. 将元素「渲染」在画面上。

当不同属性改变时，因为会影响到的范围不同，所以重新绘制元素的成本也会不相同。

过去小编对transform及opacity属性的使用非常少！在了解css属性改变对画面渲染的成本影响有区别之前，如果做位移大多会选择position: absolute定位再加上margin；如果有透明度要修改时也不会选择操控opacity，而是选择使用rgba来控制透明度。

过去因工作需求，所以大部分都是使用电脑来看动画，今年因缘际会下需要将动画配合手机做调整，才发现原来css的使用对效能的影响也可以很大。 动画跑在手机上直接当机啊！ 於是後来将之前写的动画都改写过，如果用transform或opacity就可以达到想要的动画效果，那麽就会减少对渲染成本比较高的属性做调整，正在看文章的你不妨回去看看自己写过的动画，看看在写动画时是不是可以将渲染成本比较高的属性替换成渲染成本低的属性。

如果有写错的地方，欢迎点评！ 会及时改进～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後叙述～