盒模型
一个div的分层
动画的原理
- 由许多静止的画面组成，画面以一定的速度连续播放（如每秒30张），肉眼因视觉残象产生错觉，误以为是活动的画面。
- 每个静止的画面叫做帧。
浏览器渲染原理
- 步骤
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两颗树合并成一颗渲染树（render tree）
- Layout 布局（文档流、盒模型、计算大小和位置）
- Paint 布局（把边框颜色、文字颜色、阴影等画出来）
- Compose 合成（根据层叠关系展示画面）
- 三棵树
- 三种更新方式
CSS动画优化
- CSS优化：使用 will-change 或 translate
- JS优化：使用 requestAnimationFrame 代替 SetTimeout 或 setlnterval
transform属性
四个常用功能：
- 位移 translate
- 缩放 scale
- 旋转 rotate
- 倾斜 skew
经验：
- 一般需要配合transition过渡
- inline元素不支持transform，需要先变成block
transition 过渡
- 作用：
补充中间帧
- 语法：
- transition：属性名 时长 过渡方式 延迟
- transition：left 200ms linear
- 可以用逗号分隔两个不同的属性 transition：left 200ms，top 400ms
- 可以用all代表所有属性 transition：all 200ms
- 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bexier | step-start | step-end | steps
- 并不是所有属性都可以过渡
display: none => block没法过渡，一般改成 visibility: hidden => visible background颜色和opacity透明度可以过渡
实践：做一颗跳动的心
动画属性animation
- 缩写语法：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充方式 | 是否暂停 | 动画名；
- 时长：1s 或者 1000ms
- 过渡方式：跟 transition 取值一样，如linear
- 次数：3 或者 2.4 或者 infinite
- 方向：reverse | alternate | alternate-reverse
- 填充方式：none | forwards | backwards | both
- 是否暂停：paused | running
