CSS3中动画属性transform、transition和animation属性的区别

Transform
在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。

关于图形变形的基础条件当中的原点设定，在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的（有待研究）。其他的属性则根据这个属性来计算进行计算。

关于图形变化的模式，css3标准当中transform-style来定义。默认是flat，展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说，应该只需要preserve-3d就好了，但是从谣传“开启了perserve-3d就使用了GPU加速”来说，这个属性可能是为了降低系统消耗用的，毕竟3d比2d要多一个维度的计算。

如果需要使用3d模式，必须先指定style为3d，并在任意父元素上增加 perspective及 perspective-origin 来指定透视点。

具体的给设计师改变元素样式用的属性则有以下五个：

     1、translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
     2、rotate(deg)是用来控制元素旋转角度的；
     3、skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
     4、scale3d(x,y,z) 用来放大缩小效果，属性是比值；
     5、matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

总体看来 css transform的属性和原来使用的left ，right ，top， bottom 的属性从动静角度来说没有任何区别，因此使用的时候应该将transform归类到这类定位变形的静态属性里面。

Transition
transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。比如你有如下两个样式：