CSS3 animation（CSS3 帧动画）

email：gm4linus at gmail dot com

以前浏览器中的DOM动画都是通过js来实现的，现在css3提供了动画功能，即animation，下面是一个进度条的例子来说明如何使用。

先创建一小段HTML片段。

<div class="wp">
	<div class="inner animation" id="animation"></div>
</div>

接下来写CSS

.animation{ 
	/* 定义CSS3动画 */
	-webkit-animation-name: animation-name; /*动画名字，与keyiframes结合使用*/
	-webkit-animation-duration: 10s; /*动画持续时间*/
	-webkit-animation-timing-function: linear; /*动画播放方式，当前为线性*/
	-webkit-animation-iteration-count: infinite;/*动画播放次数，当前为无限循环*/
	-webkit-animation-delay: 2s;/* 动画延时开始时间 */
	-webkit-animation-direction: 'normal'; /* 播放方向 */
	/* -webkit-animation-play-state: 'running';  播放状态 */
	
	animation-name: animation-name;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@-webkit-keyframes animation-name{/* CSS3 帧动画时间轴，兼容webkit私有属性 */
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
@keyframes animation-name{/* CSS3 帧动画时间轴 */
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
.wp .inner{ /* CSS2 */
	display: inline-block;
	width: 0;
	height: 20px;
	border-radius: 4px;
	background-color: #5bc0de;
}

这样应用了inner和animation class就可以动起来了。

浏览器兼容性可以查看http://caniuse.sinaapp.com/html/item/css-animation/index.html。

例子运行可以查看http://caniuse.sinaapp.com/html/demos/css-animation/index.html