浏览器渲染过程和CSS动画

动画的原理

动画其实是一个人脑的bug，是由很多个静止不同的图片，加速播放，让人看起来是在不停播放的视觉效果

动画的定义

1. 由许多静止的画面 (帧)
2. 以一定的速度(如每秒30张) 连续播放时
3. 肉眼因视觉残象产生错觉
4. 而误以为是活动的画面

概念

1. 帧：每个静止的画面都叫做帧
2. 播放速度：每秒24帧（影视）或者每秒30帧（游戏）

CSS是怎样实现动画的

使用transform属性

四个常用功能

	位移 translate
	缩放 scale
	旋转 rotate
	倾斜 skew

translate 常用写法

	translateX(<length-percentage>) 水平移动
	translateY(<length-percentage>) 垂直移动
	translate(<length-percentage> , <length-percentage>?) 水平 和 锤子 移动
	translateZ(<length>) 且父容器 perspective 平面大小移动
	translate3d(x,y,z) 3d 离屏幕更近

transform 之 scale

	scaleX(<number>) 水平变大缩小
	scaleY(<number>) 垂直变大缩小
	scale(<number>,<number>) 水平垂直变大缩小

transform 之 rotate

	rotate([<angle> | <zero>])
	rotateZ([<angle> | <zero>])
	rotateX([<angle> | <zero>])
	rotateY([<angle> | <zero>])

transform 之 skew

	skewX([<angle> | <zero>])
	skewY([<angle> | <zero>])
	skew([<angle> | <zero>],[<angle> | <zero>]?)

浏览器渲染过程

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