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;
	}

}

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