Animation

动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯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动画。

出处：前端观察
责任编辑：bluehearts

上一页 你需要知道的CSS3动画技术 [5] 下一页 你需要知道的CSS3动画技术 [7]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。