1.浏览器渲染
渲染过程：
（1）根据HTML构建html数（DOM）
（2）根据css构建css树（CSSOM）
（3）将两棵树合并成一颗渲染树（reader tree）
（4）layout布局（文档流，盒模型、计算大小和位置）
（5）Paint绘制（边框颜色、文字颜色、阴影等画出来）
（6）composite合成（根据层叠关系展示画面）
所以会有三种更新方式
第一种：全走一遍，比如：
div.remove()
第二种：跳过layout，比如：
改变背景颜色
第三种：跳过layout和paint，比如
改变transform
各个属性分别会通过哪种方式走完全程，推荐网站
css动画优化，推荐网站
developers.google.com/web/fundame…
2.transition
CSS的过渡属性transition可以仅通过CSS来实现简单的动画效果，同时它是一个简写属性，由transition-property、transition-duration、transition-timing-function和transition-delay复合而成。
过渡属性
-
transition-property 指定应用过渡属性的名称。
transition-property: all; // 默认为all，所有可被动画的属性都表现出过渡动画。 transition-property: none; // 没有动画效果 transition-property: width, height; //也可以取其他属性的值 复制代码
-
transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
transition-duration: 1s; transition-duration: 1ms; transition-duration: 1s, 10s, 10ms; // 可以应用多个值，对应于transition-property的多个属性，表示每个属性对应的延时时间
复制代码
-
transition-timing-function 表示过渡动画的运动曲线。
transition-timing-function: cubic-bezier(n, n, n, n); // 在bezier 函数中自定义 0 ~ 1 之间的数值 transition-timing-function: ease; // 默认值，慢速开始，中间变快，慢速结束；相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。 transition-timing-function: linear; // 匀速运动；相当于 cubic-bezier(0, 0, 1, 1)。 transition-timing-function: ease-in; // 慢速开始；相当于 cubic-bezier(0.42, 0, 1, 1)。 transition-timing-function: ease-out; // 慢速结束；相当于 cubic-bezier(0, 0, 0.58, 1) transition-timing-function: ease-in-out; // 慢速开始，慢速结束；相当于 cubic-bezier(0.42, 0, 0.58, 1) transition-timing-function: step-start; transition-timing-function: step-end; transition-timing-function: steps(4, end); 复制代码
-
transition-delay 表示过渡效果的延迟时间
transition-delay: 3s; 复制代码
简写属性
transition是上面四个过渡属性的简写，其中只有transition-duration是必填属性。
transition: all 5s linear .2s; // 以空格隔开属性
transition: all 5s linear .2s, height 3s ease-in-out; // 可以以逗号隔开多个过渡。
复制代码
使用场景
transition一般在css中配合:hover, :active等伪类使用,实现相应等动画效果。
.app {
width: 300px;
transition: all 3s linear .2s;
}
.app:hover {
width: 100;
}
一般简写：
transition：all .3s;
3.animation
Animation 是 CSS3 属性中，除了 transform、transiton 之外的一个动画属性。
具体有：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。
2.1 animation-name
语法： animation-name: none | index; 规定需要绑定到选择器的 keyframe 名称。
keyframe 关键帧
可以为动画变化的关键位置设置一定的顺序。
它的规则是 @keyframes 名称 {...} （注意要加 s，不然无法识别规则。）
有两种写法，一种是 0% - 100%，中间可以创建多个百分比给元素加上动画效果。
假设自定义 keyfram 名称为：index
@keyframes index {
0% {
/* ... */
}
50% {
/* ... */
}
100% {
/* ... */
}
}
复制代码
另外一种写法是，from - to，from 相当于 0%，to 相当于100%，中间正常添加百分比。
@keyframes index {
from {
/* ... */
}
50% {
/* ... */
}
to {
/* ... */
}
}
复制代码
2.2 animation-duration
语法： animation-duration: time;
规定完成动画所花费的时间**（持续时间）**，单位为秒或毫秒。
2.3 animation-timing-function
语法： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*
规定动画的速度曲线。
2.4 animation-delay
语法： animation-delay: time;
规定在动画开始之前的延迟时间，单位为秒或毫秒。
2.5 animation-iteration-count （迭代次数）
语法： animation-iteration-count: infinite | number;
规定动画应该反复播放的次数**（迭代次数）**。
2.6 animation-direction （播放方向）
语法： animation-direction: normal | reverse | alternate | alternate-reverse;
规定动画播放的方向。
normal：默认值，正向播放。
reverse：反向播放。
alternate：偶数次反向播放、奇数次正向播放。
alternate-reverse：奇数次反向播放、偶数次正向播放。
2.7 animation-fill-mode （填充模式）
语法： animation-fill-mode: none | forwards | backwards | both;
规定动画在播放之前或之后，其动画效果是否可见。
none：不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
2.8 animation-play-state （播放状态）
语法： animation-play-state: running | paused
规定动画正在运行还是暂停，即控制动画播放状态。
running：默认值，动画正常播放。
paused：动画暂停。
