CSS3與動(dòng)畫(huà)有關(guān)的屬性transition、animation、transform對(duì)比

最近應(yīng)公司需求，需要用css3做動(dòng)畫(huà)，終于把以前一直傻傻分不清楚的三個(gè)屬性理解了。

索性在這里進(jìn)行一個(gè)簡(jiǎn)單的對(duì)比，加深自己的記憶。

瀏覽器兼容性

CSS3 transform 屬性

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

Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）。

Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。

Opera 只支持 2D 轉(zhuǎn)換。

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */-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:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

CSS3 transition 屬性

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

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

注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。

用法：

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

其他對(duì)比

transition和animation屬于動(dòng)畫(huà)屬性，transform屬于靜態(tài)屬性。
根據(jù)英文單詞的理解：轉(zhuǎn)換，變換，transform主要指位移、大小、位置、形狀的轉(zhuǎn)換，直接寫(xiě)該屬性變換，得到的就是變換后的形狀和位置。
transition和animation因?yàn)槎紝儆趧?dòng)畫(huà)屬性，所以都具有以下

• property

• duration

• timing-function

• delay
  
  

屬性、動(dòng)畫(huà)時(shí)間、動(dòng)畫(huà)形式、延遲時(shí)間
對(duì)于animation，property變成了動(dòng)畫(huà)的名稱
animation獨(dú)有的屬性有：

• animation-iteration-count

• animation-direction

　一個(gè)要定義動(dòng)畫(huà)播放的次數(shù)，一個(gè)為定義動(dòng)畫(huà)是否輪流反向播放

簡(jiǎn)寫(xiě)形式對(duì)比：

transition屬性：過(guò)渡，即css變化的過(guò)程的過(guò)渡，所以定義transition屬性的意義為，當(dāng)定義過(guò)transition的屬性，發(fā)生了變化，都會(huì)按照這個(gè)過(guò)渡的動(dòng)畫(huà)進(jìn)行轉(zhuǎn)變，而不是生硬的直接轉(zhuǎn)變，這樣就為動(dòng)畫(huà)提供了很好的方式。
一般我們寫(xiě):

-webkit-transition:all 0.85s ease-in 0.1s;
-o-transition:all 0.85s ease-in 0.1s;
-moz-transition:all 0.85s ease-in 0.1s;
transition:all 0.85s ease-in 0.1s;

all代表這所有屬性的變化都會(huì)按照這個(gè)過(guò)渡進(jìn)行變化

animation寫(xiě)法：

-webkit-animation: tang1 0.5s ease 0s infinite alternate;
animation: tang1 0.5s ease 0s infinite alternate;

簡(jiǎn)寫(xiě)形式，animation后面多了動(dòng)畫(huà)次數(shù)和是否輪流反向播放

animation開(kāi)頭的為動(dòng)畫(huà)名稱，所以這里我們要先定義動(dòng)畫(huà)如何變換：

@keyframes tang1{from {left:0px;}to {left:200px;}}

@-webkit-keyframes tang1 /*Safari and Chrome*/{from {left:0px;}to {left:200px;}

因?yàn)闉g覽器兼容性，這里定義動(dòng)畫(huà)時(shí)也要寫(xiě)到。
from代表0%的時(shí)候，to 代表100%的時(shí)候。