# CSS 动效优化
3D transforms: translate3d, translateZ and so on;
<video>, <canvas> and <iframe> elements;
animation of transform and opacity via Element.animate();
animation of transform and opacity via СSS transitions and animations;
position: fixed;
will-change;
filter;
以上会开始GPU渲染
position 的 left 和 top 大于 transform translateXY
GPU 在transform 的时候回把position：absolute；z-index:1；都是一样的元素都提升到一层，然后渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
- https://www.w3cplus.com/animation/animation-performance.html
- https://developer.mozilla.org/zh-CN/docs/Web/Performance/CSS_JavaScript_animation_performance
- https://juejin.cn/post/6844903502678867981#heading-0
- https://www.infoq.cn/article/javascript-high-performance-animation-and-page-rendering/
- https://csstriggers.com/