Browser rendering process and CSS animation

The principle of animation

Animation is actually a human brain bug. It is made up of many still different images, which speed up the playback, making people look like they are playing the visual effects non-stop

Definition of animation

1. By many still pictures (frames)
2. When playing continuously at a certain speed (such as 30 frames per second)
3. The naked eye has an illusion due to visual afterimages
4. And mistakenly thought it was an active picture

concept

1. Frame: every still picture is called a frame
2. Play speed: 24 frames per second (video) or 30 frames per second (game)

How does CSS achieve animation

Use transform attribute

四个常用功能

	位移 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>]?)

Browser rendering process

1. Build HTML tree (DOM) from HTML
2. Building a CSS tree based on CSS (CSSOM)
3. Combine two trees into a render tree
4. Layout (document flow, box model, calculated size and position)
5. Paint drawing (draw the border color, text color, shadow, etc.)
6. Compose synthesis (display screen based on cascading relationship)