CSS3：动画的使用（如何定义一个动画）及动画常用的一些属性

制作动画分两步：
1.先定义好动画；
2.再使用（调用）该动画；
和创建一个类class，然后再调用这个类class是一样的道理。
用@keyframes来定义动画，例如：

/*move就是创建的动画名称*/
@keyframes move {
	0% {
		width: 100px;
	}
	50% {
	/*先向X轴移动500像素*/
		transform: translate(500px,0);
	}
	100% {
	/*再向Y轴移动500像素*/
		transform: translate(500px,500px);
	}
}

@keyframes动画的理解：
1.0%是动画的开始，100%是动画的完成，这样的规则就是动画序列；
2.在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果；
3.可以改变任意多的样式任意多的次数；
4.用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。

@keyframes动画的使用（调用）：
元素使用定义好的动画：

div {
	width: 100px;
	height: 100px;
	background-color: pink;
	/*调用定义好的动画*/
	animation-name: move;
	/*动画在多长时间完成*/
	animation-duration: 3s;
}

animation-name和animation-duration必须要有，不然无法显示出动画效果。

动画常用的属性：

属性	描述
@keyframes	规定动画/创建动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成所花费的时间，默认是0，单位是秒或毫秒
animation-timing-function	规定动画的速度曲线，默认是“ease”，匀速是"linear"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite无限次
animation-direction	规定动画是否在下一周期逆向播放，默认是normal，不逆向播放，alternate逆向播放
animation-play-state	规定动画是否正在运行或暂停，默认是running运行，还有pauesd暂停
animation-fill-mode	规定动画结束后的状态，保持forwards和回到初始状态backwards

animation-timing-function速度曲线细节
linear:动画从头到尾的速度是相同的，匀速；
ease:默认是ease，动画以低速开始，然后加快，在结束前变慢；
ease-in:动画以低速开始；
ease-out:动画以低速结束；
ease-in-out:动画以低速开始和结束；
steps():指定了时间函数中的间隔数量（步长，这个动画从头做到尾需要多少步能完成）