CSS3关键帧动画(animation keyframes)

关键帧动画animation

通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制

分为两步：

一、定义关键帧动画

@keyframes 动画名称{
	时间点 {元素状态}
}
时间点可以用from (表示起始点) 和 to（表示终点）表示
也可以用百分比表示 0%~100%。

二、绑定关键帧动画

在需要添加动画的元素的css中添加属性 animation
animation也是一个复合属性

animation-name：定义的动画名称
animation-duration:time： 动画播放的时间
animation-timing-function： 规定动画的速度曲线。

	同transition中transition-timing-function默认参数一样，也可以使用贝塞尔曲线
	还可以使用步进函数steps()
	第一个参数必须为正整数,第二个参数取值可以是start或end,默认是end
	step-start：等同于 steps(1, start)
	step-end：等同于 steps(1, end)
	steps(n,start)	设置n个时间点，第一时间点变化状态    
	steps(n,end)	设置n个时间点，第一时间点初始状态

animstion-delay:time： 规定在动画开始之前的延迟
an