利用css3的animation实现slide
其实去年就开始接触到了css3动画，由于精力有限，然后就是关于这方面的资料并不多，所以只了解了下皮毛。
最近看了一下移动Javascript框架jQuery Mobile的源码，发现里面的页面切换，很多动画效果都是用css3来实现的。其实现在很多人依旧因为ie不支持css3而放弃去了解这方面知识，作为无线前端开发，很幸运能够走在大家前面去了解这些东西。
今天，主要介绍一下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。
animation-direction 动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。
—————————————————————
有兴趣的可以看看我利用animation实现slide幻灯片。
没有评论▼