/* 定义要调用的动画 */
@-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动画
总结
现在，JavaScript可以在CSS 3完善之前弥补这个差距。遗憾的是，让所有浏览器支持这些很棒的属性可能需要一个很长的过程。不用等待那一天的到来，我们可以先使用一些严谨的渐进增强以及以来Javascript来增强我们的网站和应用。这不是件坏事，至少现在看起来是。
看了最近的IE9的公告，如果IE团队添加这些属性中的一些到这个新的版本的浏览器中我不会感到惊讶，他们已经开始考虑整合CSS3了(border-radius)。
web的前景是光明的，特别是因为这些类似动画的高度实验性的属性。尽管很多属性对客户或高级产品工作还不可用，至少他们很有趣！我们都期待着有一天，我们可以支持所有平台，以建立一些真的很棒的轻量级应用。
参考与资源
A Crash Course in Advanced CSS3 Effects
Net Tuts 发布的一个很酷的关于CSS3效果的视频。
Webkit Announces Support for CSS 3D Transforms
CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit.
Jonathan Snook on CSS Text Rotation
Jonathan Snook 讲述即将到来的CSS3 属性.
DEV Camp CSS3 Tricks
