利用css3的animation实现slide

主要介绍一下animation,那么先看下面一段代码。


/* 确保我们是在一个 3-D 空间 */
-webkit-transform-style: preserve-3d;

/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */

-webkit-animation-name: x-spin;

-webkit-animation-duration: 7s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear; }

/* 定义要调用的动画 */

@-webkit-keyframes x-spin {

0% { -webkit-transform: rotateX(0deg); }

50% { -webkit-transform: rotateX(180deg); }

100% { -webkit-transform: rotateX(360deg); }

}

animation对应的CSS属性列表:

animation-name 动画的名称。

animation-duration 定义动画播放一次需要的时间。默认为0;

animation-timing-function 定义动画播放的方式,参数设置类似transition-timing-function animation-delay 定义动画开始的时间

animation-iteration-count 定义循环的次数,infinite即为无限次。默认是1。

-webkit-animation-direction 动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。

—————————————————————

有兴趣的可以看看我利用animation实现slide幻灯片。

点击查看Demo

本文来源:http://www.cssoul.com/2011/08/use-css3-make-slide/

posted @ 2011-09-28 21:44  愁容骑士FFF  阅读(540)  评论(0编辑  收藏  举报