你需要知道的CSS3 动画技术二

translate
　　这个名称“translate(转化)”有点容易误解。它事实上是一种使用X和Y坐标值定位元素的方法。

1 2 3 4 5 6
#nav{ /* 这会将nav元素向左移动10像素并向下移动20像素 */ -moz-transform: translate(10px, 20px); -webkit-transform: translate(10px, 20px); -o-transform: translate(10px, 20px); }

浏览器支持
　　translate属性目前只被Firefox, Safari/Chrome和Oprea 10.5支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Skew
　　Skew也是一个很有用的transform功能，它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别代表x和y轴的倾斜度数。

1 2 3 4 5 6
#nav{ /* 这会将nav元素向左移动10像素并向下移动20像素 */ -moz-transform: skew(30deg, -10deg); -webkit-transform: skew(30deg, -10deg); -o-transform: skew(30deg, -10deg); }

浏览器支持
　　Skew属性目前只被Firefox, Safari/Chrome和Oprea 10.5支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Matrix
　　没错，Matrix就是矩阵，矩阵是高等数学中非常基础的一个东东，而在CSS 3中确实一个相当高级的功能，CSS 3引入matrix函数，可以非常灵活的实现上述的各种效果。它有6个参数(a,b,c,d,e,f)，它事实上是一个3*3矩阵，经过该矩阵将旧的参数转换成新值：
| a b e |
| c d f |
| 0 0 1 |
　　如果你有兴趣深入研究，可以看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

　　让我们来看一个例子吧：

1 2 3 4 5 6
#nav{ /* nav元素将会像右上角倾斜 */ -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); -o-transform: matrix(1, -0.2, 0, 1, 0, 0); }

浏览器支持
　　可喜的是，IE支持matrix滤镜，虽然它不支持大部分CSS3变形功能，但是使用它的这个滤镜，基本也可以实现相同的效果，不过，你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)、Opera 10.5都支持该功能。

链式变形
　　变形常常是单独的，但是如果你想同时用到多种变形，代码也是可以快速整合的，特别是使用私有扩展。幸运的是，我们有一些内置的缩写：

1 2 3 4 5 6 7 8 9 10 11
#nav{ -moz-transform: translate(10, 25); -webkit-transform: translate(10, 25); -o-transform: translate(10, 25); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: scale(2, 1); -webkit-transform: scale(2, 1); -o-transform: scale(2, 1); }
　　这些变形可以被链到一起，从而让你的代码更高效:

1 2 3 4 5
#nav{ -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1); -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); -o-transform: translate(10, 25) rotate(90deg) scale(2, 1); }
　这些属性的真正的威力是合并到一起。你可以移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加广泛，我们就可以创建更丰富和更轻量的界面和应用。

transform-origin
　　transform-origin不是transform的一个子功能，但是和transform关系非常密切。它可以用来指定transform的起点，比如，rotate变形的默认起点是其中间，你可以将起点设置在左上角，或者左下角，这样rotate变形的结果就可能大不相同了。

　　transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,middle,bottom等描述性参数。几个例子：

1 2 3 4 5 6 7 8 9 10 11 12 13
.class1{-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -o-transform-origin: 0 0; ... } .class2{-moz-transform-origin:100% 100%; -webkit-transform-origin:100% 100%; -o-transform-origin:100% 100%; ...} .class3{-moz-transform-origin:top left; -webkit-transform-origin:top left; -o-transform-origin:top left; ...}

浏览器兼容性
　　该属性目前也只有webkit、firefox和Opera 10.5支持，而且需要添加各自的私有前缀。

transition(转换)
　　一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

　　转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。

1 2 3 4 5 6 7 8 9 10
#nav a{ background-color:red; } #nav a:hover, #nav a:focus{ background-color:blue; /* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数，不是吗？ #foreshadowing)*/ -webkit-transition-property:background-color; -o-transition-property:background-color; /* 让它持续两秒钟*/ -webkit-transition-duration:2s; -o-transition-duration:2s; }

转换的一些参数
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浏览器支持。Opera 10.5 pre版本也可以通过添加-o-前缀来支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
#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。