浏览器渲染原理

浏览器的渲染步骤可以分为以下五个：

1. 根据HTML构建 DOM 树。
2. 根据CSS构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. Layout布局(文档流，盒模型，计算大小和位置)。
5. paint绘制（把边框颜色，文字颜色，阴影等画出来）。
6. compose合成（根据层叠关系展示画面）。

CSS 动画的两种做法（transition 和 animation）

transition

过渡（transition)可以在不使用 Flash 动画或 JavaScript 的情况下， 在CSS3里使用transition可以实现补间动画（过渡效果）。

语法

• transition ：transition-property transition-duration transition-timing-function transition-delay;
• transition-property ：检索或设置对象中的参与过渡的属性
• transition-duration ：检索或设置对象过渡的持续时间
• transition-timing-function ：检索或设置对象中过渡的动画类型
• transition-delay ：检索或设置对象延迟过渡的时间

animation

语法

• animation: name duration timing-funtion delay iteration-count direction fill-mode play-state;
• name：对应animation-name单独属性，作用是指定要绑定到选择器的关键帧(即为@keyframes 动画指定一个名称)的名称
• duration：对应animation-duration单独属性，定义动画完成一个周期需要多少秒(s)或毫秒(ms)，即动画播放完成花费时间
• timing-function：对应animation-timing-function单独属性，设置动画将如何完成一个周期(如从开始到结束以相同的速度播放动画)
• delay：对应animation-delay单独属性，设置动画在启动前的延迟时间
• iteration-count：对应animation-iteration-count单独属性，定义动画的播放次数
• direction：对应animation-direction单独属性，定义是否循环交替反向播放动画
• fill-mode：对应animation-fill-mode单独属性，规定当动画不播放时(当动画完成或当动画有一个延迟未开始播放)，要应用到元素的样式
• play-state：对应animation-play-state单独属性，指定动画是否正在运行或已暂停

@keyframes

@keyframes通过在动画中定义关键帧的样式来控制CSS动画序列中的中间步骤。

@keyframes  xxx {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}