CSS动画
浏览器渲染过程
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两颗树合并成一颗渲染树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Conpose合成（根据层叠关系展示画面）
更新样式的三种方式
transform常用的4个功能
- 位移translate----可以向XYZ方向唯一
- 缩放scale----可以将元素按照一定比例缩放大小
- 旋转rotate----可以将元素按照XYZ方向顺时针方向旋转设置的度数
- 倾斜shew----可以将元素按照XYZ方向倾斜
transition过度
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果
- transition过度:属性名 时长 过渡方式 延迟----transition: top 200ms linear;
- 可以用逗号隔开两个不同的属性----transition: top 200ms,left 400ms;
- 可以用all表示所有属性----transition: all 2s;
不是所有属性都能过度
- display:none==>block 无法过度
animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- animation-name（指定要绑定到选择器的关键帧的名称）
- animation-duration（动画指定需要多少秒或毫秒完成）
- animation-timing-function（设置动画将如何完成一个周期）
- animation-delay（设置动画在启动前的延迟间隔）
- animation-iteration-count（定义动画的播放次数）
- animation-direction（指定是否应该轮流反向播放动画）
- animation-fill-mode（规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式）
- animation-play-state（指定动画是否正在运行或已暂停）
