1 浏览器渲染原理
1.1 步骤
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合成一颗渲染树（render tree）
- Layou布局（文档流，盒模型，计算大小，位置）
- Paint绘制（把边框颜色，文字颜色，阴影等画出来）
- Composite合成（根据层叠关系展示画面）
1.2 用JS更新样式
有三种不同的渲染方式：
- JS/CSS>样式>布局>绘制>合成
- JS/CSS>样式>绘制>合成
- JS/CSS>样式>合成
可以浏览：JS渲染方式了解改变每个属性更新的渲染方式。
2 CSS动画
2.1 transform
一共有四个常用的功能：
- translate 位移
- scale 缩放
- rotate 旋转
- skew 倾斜
2.1.1 translate
- translateX() 左右平移
- translateY() 上下平移
- translateY() 垂直屏幕平移
Tip:
利用translate左右居中：
left:50%;
transform:translateX(-50%);
2.1.2 scale
- scale() 整体缩放
- scaleX() 水平方向上缩放
- scaleY() 垂直方向上缩放
Tip：
较少使用，因为容易出现模糊
2.1.3 rotate
写法rotate(xxdeg)就是在平面上沿着视点（viewpoint）向右旋转。
也可以有rotateX()与·rotateY()，分别是沿水平方向向屏幕内旋转，沿着垂直方向向屏幕内旋转的意思，但是用的很少。
2.1.4 skew
倾斜，可以沿着水平方向倾斜：skewX(deg)；沿着垂直方向倾斜skew(deg)
Tip:几乎没人使用
2.1.5 transition过渡
作用：自动补充中间帧
语法：
transition: 属性名 时常 过渡方式 延迟
- 属性名：可以用 , 分隔两个不同的属性：
transition:left 200ms , top 1000ms
也可以用all代表所有的属性
- 过渡方式：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/step-start/step-end/steps
分别对对应不同的数学函数模型，点击详细了解transition-timing-function。
2.2 animation
语法：
{animation: xxx 1.5s linear infinite}
@keyfram xxx{
0%{transform:translateX(50%)
}
100%{transform:rotate(50deg)
}
}
- animation 里面的值分别为：keyfram的名称/过渡方式/次数/方向/填充样式/是否暂停
- @keyframe xxx 里面的内容为进行到什么时间点，进行什么动画
- 过渡方式：和transition一样
- 次数： 1，2，3，1.2，infinite
- 方向：reverese 反过来 ； alternative 交替的 ； alternative-reverse 开始反过来然后交替
- 填充模式： none/forward/backwards/both
- 是否暂停：可通过设置按钮：
xxx.onclick=()=>{
demo.style.animationPlayState='paused'/'running'
}
