CSS3动画

通过CSS3，我们可以创建动画，这可以在许多网页中取代动画图片，flash动画以及JavaScript。

1.@keyframes(关键帧)

定义：不同于过度动画只能定义首尾两个状态，关键帧动画可以定义多个状态，因而实现更加复杂的动画效果。
实现方法;

1 @keyframes mymove{
		from{初始状态属性}
		to{结束状态属性} 
		}
2 @keyframes mymoves{
		0%{初始状态属性}
		50%{中间可再添加关键帧}
		100%{结束状态属性}
		}

2.animation

1.animation-name:关键帧的名称；

	注：必须与规则@keyframes结合使用。
	eg：@keyframes mymove{} animation-name:mymove;

2.animation-duration:动画的持续时间；

3.animation-timing-function:动画的过渡类型；

属性值：linear:线性过度<=>贝塞尔曲线（0.0 0.0 1.0 1.0）
	   ease:平滑过度<=>贝塞尔曲线（0.25 0.1 0.25 1.0）
	   ease-in::由慢到快<=>贝塞尔曲线（0.42 0.0 1.0 1.0）
	   ease-out::由快到慢<=>贝塞尔曲线（0.0 0.0 0.58 1.0）
	   ease-in-out::由慢到快再到慢<=>贝塞尔曲线（0.42 0.0 0.58 1.0）
	   step-start:马上跳到动画每一结束帧的状态

4.animation-delay:动画的延迟；

5.animation-iteration-count:动画的循环次数；

	属性值：infinite:无限循环；
		   number:循环的次数；

6animation-direction:运动的方向；

	属性值：normal:正常方向；
		   reverse:反方向运行；
		   alternate:动画先正常运行然后反方向运行,并持续交替运行；
		   aitetnate-reverse:动画先反方向运行再正方向运行，并持续交替运行；

7.animation-play-state:动画的状态；

	属性值：running:运动；
		   paused:暂停；
	注：animation-play-state:paused; 当鼠标经过时动画暂停，鼠标移开后动画继续执行。

8.常用写法：animation:关键帧名称 动画运动时间 linear 动画延迟时间；

3.animation vs transition

	相同点：都是随着时间改变元素的属性值。
	不同点：transition需要触发一个事件（hover或者click事件）才会随着时间改变其css属性。
		   animation在不需要触发任何事件的情况下也可以随着时间变化改变元素css的属性值，
		   从而达到一种动画效果，css3的animation就需要明确的动画属性值。