浏览器渲染过程
-
HTML 标记转换成文档对象模型 (DOM)。
-
CSS 标记转换成 CSS 对象模型 (CSSOM)。
-
将CSSOM 树和 DOM 树合并成渲染树。
-
在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。
-
将像素渲染到屏幕上。
-
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。
transition
- transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
- transition 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
- transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
transition的标准语法为
<single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
transition:属性名 时长 过度方式 延迟
animation
- ainmation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
- ainmation 属性用来指定一组或多组动画，每组之间用逗号相隔。
animation的标准语法为
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
animation: 时长 过度方式 延迟 次数 方向 填充模式 是或否暂停 动画名
时长：1s 或者 1000ms。
过度方式：liner | ease | ease-in | ease-out | ............。
延迟：同时长
次数：3、2.4、infinite
方向：normal | reverse | alternate | alternate-reverse
填充模式：none | forwards | backwards | both
是否暂停：running | paused
动画名：名称
CSS学习感想：
CSS给我们的属性都很简单，但是简单的属性组合在一起可能会出现复杂的结果，甚至是出乎我们意料的结果。这种时候我们更应该去记住，原来是这样，而不是去钻牛角尖，去想为什么会这样。某种程度上，这和物理学很像，我们不需要去理解CSS的终极机制，我们只需要在某些现象中了解CSS的规则，并以这些规则来解释网页中因为CSS所发生任何的事情。
在学习的过程中如果遇到不会的，应该第一时间先自己去MDN看看有没有答案.
