CSS 动画总结

2021-08-16 67 阅读1分钟

1. 浏览器渲染原理

步骤：

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CDOM）
将两棵树合并成一棵渲染树
Layout布局（文档流、盒模型、计算大小、位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
composite合成（根据层叠关系合成）三种更新样式的方式：第一种：全走示例：js.jirengu.com/jagel/1/edi…

div.remove()会触发当前消失，其他元素relayout

第二种，跳过layout() 示例：js.jirengu.com/jidam/1/edi…

改变背景颜色，直接repaint+composite

第三种，跳过layout和paint 示例：js.jirengu.com/wusew/1

改变transform，只需composite

2. CSS 动画的两种做法（transition 和 animation）

transition：使用两次transfrom

示例：js.jirengu.com/hudebomavu/…
animation：步骤：
1. 声明关键帧@keyframes @keyframes标准写法：
- 第一种：from to
- 第二种：百分数
```
@keyframes heart{
  0%{transform: scale(1);}
  100%{transform: scale(1.5);}
}
```
1. 添加动画 animation语法： animation：``时长、过渡方式、延迟、次数、方向、填充模式、是否暂停、动画名；