一. 浏览器渲染原理
-
[参考地址]：
-
浏览器渲染过程
-
根据 HTML 构建 HTML 树（DOM）
-
根据 CSS 构建 CSS 树（CSSOM）
-
将两棵树合并成一颗渲染树（render tree）
-
Layout 布局（文档流、盒模型、计算大小和位置）
-
Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
-
Composite 合成（根据层叠关系展示画面）
-
二.CSS 动画的两种做法（transition 和 animation）
一.transition（过渡）
transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
- 语法transition
transition:属性名 时长 过渡方式 延迟
transition：left 200ms linear
可以用逗号分隔两个不同属性
transition:left 200ms,top 400ms
可以用 all 代表所有属性
transition:all 200ms
-
transition 过渡方式. 参考地址
默认ease（逐渐慢放）| linear（匀速）| ease-in（加速） | ease-out（减速） | cubic-bezier函数
二. animation
animation 属性是 animation-name， animation-duration， animation-timing-function， animation-delay， animation-iteration-count ， animation-fill-mode，animation-play-state的一个简写属性。
animation语法
-
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画;
时长
整个动画的持续时间，必须带上时间单位，s或者ms均可。
过渡方式
和transition一样，默认值是ease，另外有linear（匀速）、ease-in（加速）、ease-out（减速）、cubic-bezier函数（自定义速度，可以使用工具网站来制定），等.
延迟
动画延迟执行的时间，默认值是0s。单位也是s或者ms，即使延迟时间是0也要加单位。
次数
动画循环执行的次数，无单位，默认值是1，可以写infinite为无限循环。
方向
动画运行的方向，默认值是normal（正常方向），另外有reverse（反方向）、alternate（先正常方向运行再反方向运行，并持续交替运行）、alternate-reverse（先反方向运行再正常方向运行，并持续交替运行）
填充模式
动画的最后（达到100%）时的状态，默认值是none，常用的还有backward（回到初始状态）、forwards（停在最终状态）、both。
是否暂停
定义动画是否运行或暂停。默认值是running（运行），另外还有paused（暂停）。
@keyframes定义动画
- @keyframes语法 参考地址
- from to
@keyframes name {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
- 百分数
@keyframes name {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}
