浏览器渲染原理

渲染过程

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSDOM）
将两棵树合并成一颗渲染树（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Compose合成（根据层叠关系展示画面）

三种更新方式

1. 布局绘制合成
   如：div.remove()
   
2. 绘制合成
   如：改变背景颜色
   
3. 合成
   如：改变transform
   

看各属性触发什么方式：CSSTriggers.com

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

transition

{
transition: margin-right 2s ease-in-out .5s;/* 属性名 | 过渡时长 | 过渡动画 | 延迟 /
transition: margin-right 2s, color 1s;/ 多属性写法 /
transition: all 1s ease-out;/ 指定所有属性 */
}

animation

{
    animation:name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state
    animation: 3s ease-in 1s infinite reverse both running slidein;
    animation: 3s linear 1s infinite running slidein;
    animation: 3s linear 1s infinite alternate slidein;
    animation: .5s linear 1s infinite alternate slidein;
}

@keyframs slidein{/* 动画名称 */
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}