浅谈CSS动画

        大家好！这里阿凉，今天给大家浅浅聊一下CSS动画的浏览器渲染原理，以及两种CSS动画的做法。

1.CSS浏览器渲染原理

渲染过程

1.根据HTML构建HTML树（DOM）

2.根据CSS构建CSS树（CSSOM）

3.将两棵树合并成一颗渲染树（render tree）

4.Layout布局（文档流，盒模型，计算大小和位置）

5.Paint绘制（把边框颜色，文字颜色，阴影等画出来）

6.Compose合成（根据层叠关系展示画面）

三棵树示意图

2.js样式更新

我们在制作CSS动画的时候通常会用js来渲染，下面为大家讲解一下js如何更新样式。

用js更新样式有以下方法
1.div.style.background='red'更新背景色
2.div.style.display='none'“div”隐藏使用
3.div.classList.add('red') 指定元素名
4.div.remove() 删除节点

3.CSS的两种做法

1. transition

transition的四个常用功能

位移 translate

缩放 scale

旋转 rotate

倾斜 skew

2. animation

animation：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名；

时长：1s或者1000ms

过渡方式：跟Transition取值一样，如linear

次数：3或者2.4或者infinite

方向：reverse | alternate | alternate-reverse

填充模式：none | forwards | backwards | both

是否暂停：paused | running

以上属性都有单独的对应属性

学会了以上属性，我们就可以制作简单的动画了，大家可以自己尝试一下，如果有哪里我说的不明白大家可以私聊我给大家补充说明哦！

今天的内容就到这啦，下次见