transform拴鸵、transition玷坠、animation分別代表著轉(zhuǎn)換、過(guò)渡以及動(dòng)畫(huà)劲藐。
從各自的名字我們就可以大概了解到它們的用途八堡。transform用來(lái)移動(dòng)，比例化聘芜，反轉(zhuǎn)兄渺，旋轉(zhuǎn)，和拉伸元素汰现。transition為元素從一種樣式變成另一種樣式的過(guò)程添加過(guò)渡動(dòng)畫(huà)挂谍。animation則可以為元素添加動(dòng)畫(huà)，它可以取代許多網(wǎng)頁(yè)動(dòng)畫(huà)圖像瞎饲，F(xiàn)lash動(dòng)畫(huà)口叙，和javascript。
在介紹這三個(gè)屬性之前嗅战，我們首先得知道CSS3中的坐標(biāo)系是什么樣的妄田。

[三維世界中的坐標(biāo)系](http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201392411302262/)

transform

transform的轉(zhuǎn)換，并不是動(dòng)態(tài)的驮捍，而是最終時(shí)刻的狀態(tài)疟呐。它的移動(dòng)，比例化厌漂，反轉(zhuǎn)萨醒，旋轉(zhuǎn)，和拉伸苇倡，顯示在網(wǎng)頁(yè)中富纸，都只是元素相對(duì)當(dāng)前樣式變換后的樣式狀態(tài)囤踩。transform有如此之多的方法，見(jiàn)下表晓褪。

下面我們只介紹常用的幾個(gè)船庇。

translate(x,y)

• 使用方法：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

• 效果

  
  
• translate(x,y)方法吭产，讓元素相對(duì)當(dāng)前位置在x、y方向上偏移給定參數(shù)的距離鸭轮。
• 它是translateX()和translateY()的結(jié)合臣淤。

translate3d(x,y,z)

• 使用方法：

div
{
transform: translate3d(50px,100px,50px);
-ms-transform: translate3d(50px,100px,50px); /* IE 9 */
-webkit-transform: translate3d(50px,100px,50px); /* Safari and Chrome */
}

• 說(shuō)白了,translate3d比translate，也就多了一個(gè)translateZ的區(qū)別窃爷。當(dāng)元素具有perspective元素時(shí)邑蒋，Z軸上的變化才能體現(xiàn)出來(lái)姓蜂。translate3d和translate在視覺(jué)上最大的不同，就是元素大小的變化医吊。因?yàn)閦軸垂直于顯示器方向钱慢，z軸上的變化的體現(xiàn)，就是視覺(jué)上元素大小的變化卿堂。在此推薦張?chǎng)涡竦囊黄恼?/a>束莫，寫(xiě)的非常通俗易懂 =v=。也可以點(diǎn)擊這里體驗(yàn)translateZ的變化效果草描。

scale(x,y)

• 使用方法：

div
{
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標(biāo)準(zhǔn)語(yǔ)法 */
}

• 效果

  
  
• scale(x,y)方法讓元素可以在x,y軸方向上進(jìn)行拉伸或縮放览绿。伸縮程度由x，y參數(shù)決定穗慕。
• scale的參數(shù)如果只有一個(gè)挟裂，則默認(rèn)為等比例變化。（例如scale(1.5)代表放大1.5倍）揍诽。

rotate(deg)

• 使用方法

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

• 效果

• rotate(deg)方法讓元素在平面上順時(shí)針旋轉(zhuǎn)诀蓉，旋轉(zhuǎn)的角度由參數(shù)deg決定。deg可以為負(fù)值暑脆，deg為負(fù)時(shí)渠啤，為逆時(shí)針旋轉(zhuǎn)。
• rotate(deg)方法的旋轉(zhuǎn)平面是顯示器所在平面添吗，本質(zhì)上和rotateZ()方法的效果相同沥曹。

rotateX(deg)

• 使用方法

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}

• 效果

  
  
• rotate(deg)方法讓元素在X軸方向上順時(shí)針旋轉(zhuǎn)，旋轉(zhuǎn)的角度由參數(shù)deg決定碟联。deg可以為負(fù)值妓美，deg為負(fù)時(shí)，為逆時(shí)針旋轉(zhuǎn)鲤孵。

rotateY(deg)

• 使用方法

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

• 效果

  
  
• rotate(deg)方法讓元素在Y軸方向上順時(shí)針旋轉(zhuǎn)壶栋，旋轉(zhuǎn)的角度由參數(shù)deg決定。deg可以為負(fù)值普监，deg為負(fù)時(shí)贵试，為逆時(shí)針旋轉(zhuǎn)。

transition

transition為我們添加了某種過(guò)渡效果凯正，可以從一種樣式轉(zhuǎn)變到另一個(gè)的時(shí)候毙玻，無(wú)需使用Flash動(dòng)畫(huà)或JavaScript。它與animation的區(qū)別在于廊散，transition是為變化的過(guò)程添加動(dòng)畫(huà)桑滩，所以必須要有一個(gè)事件去觸發(fā)元素某個(gè)樣式的值的變化。
過(guò)渡動(dòng)畫(huà)有以下幾個(gè)屬性：

其中慢洋，transition-timing-function有以下幾個(gè)值：

• 使用方法

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

或者使用transition簡(jiǎn)寫(xiě)

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

• 效果
  點(diǎn)擊這里

• transition簡(jiǎn)寫(xiě)的屬性不一定要按照上面的順序來(lái)寫(xiě)幔嗦。屬性中第一個(gè)時(shí)間參數(shù)一定是過(guò)渡時(shí)間酿愧，第二個(gè)是延遲時(shí)間。transition-property如果沒(méi)有邀泉，默認(rèn)為all嬉挡。transition-timing-function默認(rèn)為ease。

• transition還可以同時(shí)設(shè)置多個(gè)屬性汇恤。

img{
    transition: 1s height, 1s width;
}

• 通常transition和transform配合使用效果更佳庞钢。例如下面的代碼實(shí)現(xiàn)了鼠標(biāo)懸停時(shí)元素放大的動(dòng)畫(huà)效果：

ul.scale li a span {
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
}
ul.scale li a span:hover {
       transform: scale(1.2);
       -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
       -o-transform: scale(1.2);
       -ms-transform: scale(1.2);
      }

查看更多transition和transform配合使用的例子請(qǐng)點(diǎn)擊這里，或者直接查看在線演示因谎。

• transition的優(yōu)點(diǎn)在于簡(jiǎn)單易用基括，但是它有幾個(gè)很大的局限。
  （1）transition需要事件觸發(fā)蓝角，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生阱穗。
  （2）transition是一次性的，不能重復(fù)發(fā)生使鹅，除非一再觸發(fā)。
  （3）transition只能定義開(kāi)始狀態(tài)和結(jié)束狀態(tài)昌抠，不能定義中間狀態(tài)患朱，也就是說(shuō)只有兩個(gè)狀態(tài)。
  （4）一條transition規(guī)則炊苫，只能定義一個(gè)屬性的變化裁厅，不能涉及多個(gè)屬性冰沙。
  CSS animation就是為了解決這些問(wèn)題而提出的。

animation

animation的用法豐富多樣执虹，在這里只作最基本的功能介紹拓挥。

• 動(dòng)畫(huà)的使用方法，首先用@keyframes創(chuàng)建動(dòng)畫(huà)袋励。例如：

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

當(dāng)使用from to時(shí)侥啤，等同于定義了0% 到 100%的動(dòng)畫(huà)過(guò)程，效果和transition相似茬故。
但animation的強(qiáng)大之處盖灸，就是可以定義任何時(shí)刻任何階段的動(dòng)畫(huà)。

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

上面代碼的動(dòng)畫(huà)效果如下 點(diǎn)擊這里磺芭。

• 當(dāng)我們完成了動(dòng)畫(huà)的創(chuàng)建赁炎，就需要將動(dòng)畫(huà)綁定到選擇器上，讓元素?fù)碛袆?dòng)畫(huà)效果钾腺。
  使用animation將定義的動(dòng)畫(huà)myfirst綁定到div元素上徙垫。

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}

這樣，div就擁有了動(dòng)畫(huà)效果放棒。

• 默認(rèn)情況下松邪，動(dòng)畫(huà)只播放一次。加入infinite關(guān)鍵字哨查，可以讓動(dòng)畫(huà)無(wú)限次播放逗抑。

div
{
    animation: myfirst 5s infinite;
    -webkit-animation: myfirst 5s infinite; /* Safari 與 Chrome */
}

• 動(dòng)畫(huà)結(jié)束以后，會(huì)立即從結(jié)束狀態(tài)跳回到起始狀態(tài)寒亥。如果想讓動(dòng)畫(huà)保持在結(jié)束狀態(tài)邮府，需要使用animation-fill-mode屬性。

div:hover {
  animation: 1s myfirst forwards;
}

forwards可以讓動(dòng)畫(huà)停留在結(jié)束狀態(tài)溉奕。

• animation-fill-mode還可以使用下列值褂傀。
  • none：默認(rèn)值加勤，回到動(dòng)畫(huà)沒(méi)開(kāi)始時(shí)的狀態(tài)。
  • backwards：讓動(dòng)畫(huà)回到第一幀的狀態(tài)。
  • both: 根據(jù)animation-direction（見(jiàn)后）輪流應(yīng)用forwards和backwards規(guī)則粟焊。
• 動(dòng)畫(huà)循環(huán)播放時(shí)悲雳，每次都是從結(jié)束狀態(tài)跳回到起始狀態(tài)合瓢，再開(kāi)始播放晴楔。animation-direction屬性，可以改變這種行為讹语。animation-direction的默認(rèn)值為normal短条。

div:hover {
  animation: 1s myfirst 3 normal;
}

以下為animation-direction所有值的動(dòng)畫(huà)效果。

• 有時(shí)，動(dòng)畫(huà)播放過(guò)程中鹦付，會(huì)突然停止背苦。這時(shí)秕噪，默認(rèn)行為是跳回到動(dòng)畫(huà)的開(kāi)始狀態(tài)腌巾。
  如果想讓動(dòng)畫(huà)保持突然終止時(shí)的狀態(tài)澈蝙，就要使用animation-play-state屬性礁击。

div {
    animation: myfirst 1s linear infinite;
    animation-play-state: paused;
}

animation還有許多屬性哆窿，具體請(qǐng)查看菜鳥(niǎo)教程CSS3動(dòng)畫(huà)。

參考鏈接
菜鳥(niǎo)教程——CSS3教程
阮一峰——CSS動(dòng)畫(huà)簡(jiǎn)介