浏览器渲染原理

• 根据HTML构造DOM树

• 根据CSS构造CSSOM树

• 合并DOM树和CSSOM树构造渲染树（RENDER TREE）

  为构建渲染树，浏览器大体上完成了下列工作：

  1. 从 DOM 树的根节点开始遍历每个可见节点。

  2. 对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。

  3. 输出具有内容和样式的节点

• Layout布局：通过文档流、盒模型和样式计算位置和大小

• Paint绘制 ：绘制元素的颜色、边框、阴影的要素

• Composite合成 ：根据页面的层叠关系展示画面

玩转css动画

transform

transform属性定义了一系列应用于元素和元素子元素的变换规则集合 常用的属性有：

• translate 平面x/y轴移动元素

transform:translateX(30px)  //x轴移动30像素  

transform:translateY(30px)  //y轴移动30像素

transform:translate(30,30)

• scale 等比例缩放元素

transform:scale(1.5) //放大为1.5倍

transform:scale(0.5) //缩小为0.5倍

• rotate 旋转元素

transform:rotate(45deg)  //旋转45度

transition

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

transition: margin-right 2s ease-in-out .5s;

animation

animation属性用来指定一组或多组动画

animation: 3s ease-in 1s infinite reverse both running slidein;`  

它是以下属性的一个简写属性形式：

1. animation-name 动画名称
2. animation-duration 动画时间
3. animation-timing-function 规定动画的速度曲线
4. animation-delay 动画延迟
5. animation-iteration-count 动画播放次数
6. animation-direction 动画方向
7. animation-fill-mode 动画在执行之前和之后这两个阶段应用的样式
8. animation-play-state 定义动画是否正在播放的状态