最近应公司需求，需要用css3做动画，终于把以前一直傻傻分不清楚的三个属性理解了。

索性在这里进行一个简单的对比，加深自己的记忆。

浏览器兼容性

CSS3 transform 属性

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的-ms-transform属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的-webkit-transform属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

transform:rotate(7deg);-ms-transform:rotate(7deg);/*IE9*/-moz-transform:rotate(7deg);/*Firefox*/-webkit-transform:rotate(7deg);/*Safari和Chrome*/-o-transform:rotate(7deg);/*Opera*/

CSS3 animation 属性

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的-webkit-animation属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

用法：

animation:mymove5sinfinite;-webkit-animation:mymove5sinfinite;/*Safari和Chrome*/

CSS3 transition 属性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的-webkit-transition属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

用法：

transition:width2s;-moz-transition:width2s;/*Firefox4*/-webkit-transition:width2s;/*Safari和Chrome*/-o-transition:width2s;

其他对比

transition和animation属于动画属性，transform属于静态属性。

根据英文单词的理解：转换，变换，transform主要指位移、大小、位置、形状的转换，直接写该属性变换，得到的就是变换后的形状和位置。

transition和animation因为都属于动画属性，所以都具有以下

property

duration

timing-function

delay

属性、动画时间、动画形式、延迟时间

对于animation，property变成了动画的名称

animation独有的属性有：

animation-iteration-count

animation-direction

一个要定义动画播放的次数，一个为定义动画是否轮流反向播放

简写形式对比：

transition属性：过渡，即css变化的过程的过渡，所以定义transition属性的意义为，当定义过transition的属性，发生了变化，都会按照这个过渡的动画进行转变，而不是生硬的直接转变，这样就为动画提供了很好的方式。

一般我们写:

-webkit-transition:all0.85sease-in0.1s;-o-transition:all0.85sease-in0.1s;-moz-transition:all0.85sease-in0.1s;transition:all0.85sease-in0.1s;

all代表这所有属性的变化都会按照这个过渡进行变化

animation写法：

-webkit-animation:tang10.5sease0sinfinitealternate;animation:tang10.5sease0sinfinitealternate;

简写形式，animation后面多了动画次数和是否轮流反向播放

animation开头的为动画名称，所以这里我们要先定义动画如何变换：

@keyframestang1{from{left:0px;}to{left:200px;}}@-webkit-keyframestang1/*SafariandChrome*/{from{left:0px;}to{left:200px;}

因为浏览器兼容性，这里定义动画时也要写到。

from代表0%的时候，to代表100%的时候。