你需要知道的CSS3 动画技术[译](7)
作者:神采飞扬 来源:前端观察 时间:2009-12-30 17:02:00
Animation
动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flas * 一样的效果——纯CSS。
#rotate {
margin: 0 auto;
width: 600px;
height: 400px;
/* 确保我们是在一个 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); }
}
这个梦幻的CSS动画代码和在线演示可以在webkit网站看到。该演示可以在任何网站看到,但是动画效果却只能在Mac os(雪豹)的WebKit的nightly build版本可见。它看起来就像上面的视频中的一样,如果你是在用mac os (雪豹版本),我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时无法欣赏这个效果。
animation的一些参数
animation的参数和translate有些像,所以如果你理解了translate的参数,这里就不难理解了。
animation-name
动画的名称。
animation-duration
定义动画播放一次需要的时间。默认为0;
animation-timing-function
定义动画播放的方式,参数设置类似transition-timing-function
animation-delay
定义动画开始的时间
animation-iteration-count
定义循环的次数,infinite即为无限次。默认是1。
-webkit-animation-direction
动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。
浏览器支持
不幸的是,目前,只有少数浏览器支持CSS动画。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 浏览器中工作。Safari 4 (Snow Leopard)支持3D动画