小姜哥的微信

CSS3 animation(CSS3 帧动画)

以前浏览器中的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: &#39;normal&#39;; /* 播放方向 */
/* -webkit-animation-play-state: &#39;running&#39;; 播放状态 */

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.mojijs.com/html/item/css-animation/index.html

推荐文章

回到顶部