CSS3的keyframe动画介绍

#sun.VeryHuo {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes sunrise {

	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}

	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}

	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}

}

animation-timing-function   动画类型
animation-iteration-count   动画循环次数
animation-delay             动画播放延迟
animation-play-state        动画播放还是暂停 (参数: paused, running)
animation-fill-mode         动画结束状态
                            none：默认值。不设置对象动画之外的状态
                            forwards：设置对象状态为动画结束时的状态
                            backwards：设置对象状态为动画开始时的状态
                            both：设置对象状态为动画结束或开始的状态
animation-direction         检索或设置对象动画循环播放次数大于1次时，动画是否反向                      运动。
                            normal：正常方向。
                            reverse：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）
                            alternate：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。
                            alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持）