你需要知道的CSS3 动画技术
原文链接：http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html
?
#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动画
总结
现在，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
一份来自Dan Kurtz的幻灯演示 - W3C Spec on 2-D Transformations
关于2-D 变换的资源. - W3C Spec on 3-D Transformations
一个关于3-D 变换的资源. - W3C Spec on CSS3 Animations
CSS animations的W3C工作草案 - Safari CSS参考
- MDC:Using CSS transforms
- MDC: -moz-transform
关于原作者
Tim Wright是一位网页设计师/开发工程师和博主。他从2004年就成为一名web标准和易用性的倡导者。你可以在CSSKarma.com上找到他写的更多文章，或者follow Tim on Twitter。
- A Crash Course in Advanced CSS3 Effects