一、浏览器渲染原理
1.浏览器渲染过程
①根据HTML构建HTML树（DOM）
②根据CSS构建CSS树（CSSOM）
③将两棵树合并成一棵渲染树（render tree）
④Layout布局（定位：文档流、盒模型、计算大小和位置）
⑤Paint绘制（把边框颜色、文字颜色、阴影等画出来）
⑥Compose合成（根据层叠关系展示画面）
2.三种更新方式
①JS/CSS>样式>布局>绘制>合成
②JS/CSS>样式>绘制>合成
③JS/CSS>样式>合成
二、CSS 动画的两种做法（transition 和 animation）
1.transition：过渡=>用作补充中间帧
①语法
transition: 属性名 时长 过渡方式 延迟
属性名：可以用逗号分隔两个不同属性，eg.transition: left 200ms,top 400ms；all可以代表所有属性，eg.transition:all 200ms
过渡方式：linear线性匀速丨ease缓动丨ease-in淡入丨ease-out淡出丨ease-in-put淡入+淡出丨cubic-bezier丨step-start丨step-end丨steps
②display: none =>block 没法过渡，一般改成visibility: hidden=>visible
background颜色可以过渡
opacity透明度可以过渡但不推荐
③过渡必须要有起始，一般只有一次动画，或者两次，eg.hover和非hover的过渡
④做法：使用两次transform
.a===transform===>.b
.b===transform===>.c(.c需含.b状态)
用setTimeout或者监听transitionend事件知道中间点
2.animation
①语法
animation:时长丨过渡方式丨延迟丨次数（3/2.4/infinite无限次）丨方向（reverse反过来/alternate交替的/alternate-reverse反过来交替）丨填充模式（none/forwards停在最后一帧/backwards/both）丨是否暂停（paused/running）丨动画名；
②做法：声明关键帧，添加动画
A.声明关键帧语法：
- @keyframes xxx(动画名) {
0% { transform: none; }
38%,72% { transform: translateX(200px); }
100%{ transform: translateX(200px);top: 0 ;left: 50%; }
}
- @keyframes xxx(动画名) { from{ transform: none; }
to { transform: translateX(100%); }
}
B.添加动画：
animation: xxx 1.5S forwards （XXX动画运行1.5S停在最后一帧）
