位置：首页>> 网络编程>> 网页设计>> 你需要知道的CSS3 动画技术[译]（7）

你需要知道的CSS3 动画技术[译]（7）

作者：神采飞扬　来源：前端观察　发布时间：2009-12-30 17:02:00　

标签：CSS3,动画,设计师

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动画

第一页上一页 4 5 6

8 下一页

投稿

你需要知道的CSS3 动画技术[译]（7）

Animation

animation的一些参数

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

-webkit-animation-direction

浏览器支持

猜你喜欢