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