CSS3与动画有关的属性transition、animation、transform对比CSS3 transform 属性CSS3 animation 属性 CSS3 transition 属性

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

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

浏览器兼容性

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

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

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

Opera 只支持 2D 转换。

<code>transform:rotate(</code><code>7</code><code>deg);</code>

<code>-ms-transform:rotate(</code><code>7</code><code>deg);     </code><code>/* IE 9 */</code><code>-moz-transform:rotate(</code><code>7</code><code>deg);     </code><code>/* Firefox */</code><code>-webkit-transform:rotate(</code><code>7</code><code>deg); </code><code>/* Safari 和 Chrome */</code><code>-o-transform:rotate(</code><code>7</code><code>deg);     </code><code>/* Opera */</code>

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

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

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

用法：

<code>animation:mymove </code><code>5</code><code>s infinite;</code>

<code>-webkit-animation:mymove </code><code>5</code><code>s infinite; </code><code>/* Safari 和 Chrome */</code>

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

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

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

<code>transition: width </code><code>2</code><code>s;</code>

<code>-moz-transition: width </code><code>2</code><code>s; </code><code>/* Firefox 4 */</code><code>-webkit-transition: width </code><code>2</code><code>s; </code><code>/* Safari 和 Chrome */</code><code>-o-transition: width </code><code>2</code><code>s;</code>

property

duration

timing-function

delay

animation-iteration-count

animation-direction

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

<code>-webkit-transition:</code><code>all</code> <code>0.85</code><code>s ease-in </code><code>0.1</code><code>s;</code>

<code>-o-transition:</code><code>all</code> <code>0.85</code><code>s ease-in </code><code>0.1</code><code>s;</code>

<code>-moz-transition:</code><code>all</code> <code>0.85</code><code>s ease-in </code><code>0.1</code><code>s;</code>

<code>transition:</code><code>all</code> <code>0.85</code><code>s ease-in </code><code>0.1</code><code>s;</code>

<code>-webkit-animation: tang</code><code>1</code> <code>0.5</code><code>s ease </code><code>0</code><code>s infinite alternate;</code>

<code>animation: tang</code><code>1</code> <code>0.5</code><code>s ease </code><code>0</code><code>s infinite alternate;</code>

<code>@keyframes tang</code><code>1</code><code>{from {</code><code>left</code><code>:</code><code>0px</code><code>;}to {</code><code>left</code><code>:</code><code>200px</code><code>;}}</code>

<code>@-webkit-keyframes tang</code><code>1</code> <code>/*Safari and Chrome*/</code><code>{from {</code><code>left</code><code>:</code><code>0px</code><code>;}to {</code><code>left</code><code>:</code><code>200px</code><code>;}</code>

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

<b>本文转自 蓓蕾心晴 51CTO博客，原文链接：</b><b>http://blog.51cto.com/beileixinqing/1931752</b><b>，如需转载请自行联系原作者</b><b></b>