transition(转换)
一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。
转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。
|
以下为引用的内容： #nav a{ background-color:red; } |
转换的一些参数
transition-property
指定转换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。
transition-duration
定义转换花费的时间（从旧属性换到新属性花费的时间）
transition-timing-function
可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out
transition-delay
这个比较容易理解，就是转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。
注：参数部分为翻译时添加，原文中没有。
浏览器支持
像transform属性一样酷，但是目前只有WebKit浏览器支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。
Animation
动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯CSS。
视频地址：http://www.tudou.com/programs/view/YeTPctOy2mo
|
以下为引用的内容： #rotate { |
这个梦幻的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动画。