浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制），又可以分为下面5个步骤：
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个节点绘制到屏幕上。
transition的用法：
- transition就是过渡的意思，就是 告诉你开头是什么样的，中间是什么样的，结束的时候是什么样的.
- 作用：补充中间帧，给你开始结尾补充中间的画面变化是怎么样的。
- 语法：
transition：属性名 时长 过渡方式 延迟
transition:width 1s linear 3s
也可以用逗号来隔开两个不同的属性：可以用all代表所有属性
transition: all 2s
过渡方式有：linear | ease（非线性） | rase-in | raes-out | ease-in-out |
注意：
并不是所有属性都能过渡
display:none=>block无法过度，一般改成xisibilit：hidden=>visible
opaciti:0;（透明度）让动画看不见，但位置还占着，容易bug.要等动画结束的时候关掉。
background是可以过度的
animation
#demo.start{
animation: xxx 1.5s
}
@keyframes xxx{
0%{transform:translate x(200px);}
66.66%{transform:translate x(200px);tranform:translate(100px);}
}
如何让动画停在最后一帧？直接在后面加一个forwards
animation： xxx 1.5s forwards;
@animation还有另一种用法：
#demo.start{
animation: xxx 1.5s forwards
}
@keyframes: xxx {
from {transform:translate(200px);}
to {transformLtranslate(100px);}
}
xxx是一个名字，当声明@keyframes xxx时，需要把XXX放在animation里面
