CSS动画实现笔记
浏览器渲染过程
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一棵渲染树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（边框颜色、文字颜色、阴影等）
- Compose合成（根据层叠关系展示画面）
三棵树图示
三种更新方式
- div.remove会触发当前消失，其他元素relayout；
- 改变背景颜色，跳过layout；
- 改变transform，只需Compose合成。
CSS动画优化
- JS优化 使用requestAnimationFrame代替setTimeout或setlnterval
- CSS优化 使用will-change或translate
transform
四个常用功能
- trabslate 位移
- scale 缩放
- rotate 旋转
- skew 倾斜
注意：一般都需要配合transition过渡 inline元素不支持transform
transition过渡
作用：补充中间帧
语法:
- transition:属性名 时长 过渡方式 延迟
- transition:left 200ms linear(可用all代表所有属性）
- 过渡方式：linear/ease/ease-in/ease-out等
注意：并不是所有属性都能过渡 例如
display:none-block
animation用法
缩写语法：
- animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
- 时长：如1s
- 过渡方式：与transition一样
- 次数：X或infinite
- 方向：reverse/alternate/alternate-reverse
- 填充模式：none/forwards/backwards/both
- 是否暂停：paused/running
@keyframes 生命中间帧
