CSS渲染原理及流程

css的渲染流程

浏览器对内容的渲染（渲染树构建、布局及绘制），可以分为下面五个步骤：
1.处理 HTML 标记并构建 DOM 树。
2.处理 CSS 标记并构建 CSSOM 树。
3.将 DOM 与 CSSOM 合并成一个渲染树。
4.根据渲染树来布局，以计算每个节点的几何信息。
5.将各个节点绘制到屏幕上

css的三种样式更新方式

全走：div.remove(); 会触发当前元素消失，其他元素要重构、绘制和合成 
跳过layout：改变背景颜色
跳过layout和paint：改变tansform 所以尽量使用transform可优化动画效率

transform语法：参考mdn

eg：animation和hover、trasition制作CSS动画♥

transition 过渡
作用：补充中间帧
语法
transition： 属性名 时长 过渡方式 延迟
transition： left 200ms linear
可以用逗号分隔两个不同属性
transition： all 200ms
all 代表所有属性
过渡方式有：linear | ease | ease-in | ease-out | ease-in-out 等等，具体看文档
注意
并不是所有属性都能过渡
display: none => block 没法过渡
一般改成 visibility：hidden => visible
display 和 visibility 自行搜索区别
background 和 opacity 都可以过渡
过渡必须要有起始
一般只有依次动画，或者两次
比如 hover 和非 hover 状态的过渡
如果还需中间点，那么有两种办法
第一种，使用两次 transform
.a === transform ===> .b
.b === transform ===> .c
用 setTimeout 或者监听 transitionend 事件
演示
第二种，直接用 animation
声明关键帧
添加动画
演示

@keyFrames 完整语法

一种写法是 from to
另一种是百分数

    from {
        transform: translate(0%);
    }
    to {
        transform: translate(100%);
    }
}

@keyframes slidein {
    0% { top: 0; left: 0;}
    30% { top: 50px;}
    68%, 72% { left: 50px;}
    100% { top: 100px; left: 100%;}
}

animation
缩写语法
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名 ;
时长：1s 或者 1000ms
过渡方式：和transition 取值一样看， 如linear
次数： 3 或者2.4 或者infinite
方向：reverse | alternate | alternate-reverse
填充模式：none | forwards | backwards | both
是否暂停： paused | running
以上属性都有对应的单独属性

例子请点击这里