transform、transition、animation分別代表著轉換、過渡以及動畫。
從各自的名字我們就可以大概了解到它們的用途。transform用來移動，比例化，反轉，旋轉，和拉伸元素。transition為元素從一種樣式變成另一種樣式的過程添加過渡動畫。animation則可以為元素添加動畫，它可以取代許多網頁動畫圖像，Flash動畫，和javascript。
在介紹這三個屬性之前，我們首先得知道CSS3中的坐標系是什么樣的。

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

transform

transform的轉換，并不是動態的，而是最終時刻的狀態。它的移動，比例化，反轉，旋轉，和拉伸，顯示在網頁中，都只是元素相對當前樣式變換后的樣式狀態。transform有如此之多的方法，見下表。

下面我們只介紹常用的幾個。

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)方法，讓元素相對當前位置在x、y方向上偏移給定參數的距離。
• 它是translateX()和translateY()的結合。

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 */
}

• 說白了,translate3d比translate，也就多了一個translateZ的區別。當元素具有perspective元素時，Z軸上的變化才能體現出來。translate3d和translate在視覺上最大的不同，就是元素大小的變化。因為z軸垂直于顯示器方向，z軸上的變化的體現，就是視覺上元素大小的變化。在此推薦張鑫旭的一篇文章，寫的非常通俗易懂 =v=。也可以點擊這里體驗translateZ的變化效果。

scale(x,y)

• 使用方法：

div
{
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標準語法 */
}

• 效果

  
  
• scale(x,y)方法讓元素可以在x,y軸方向上進行拉伸或縮放。伸縮程度由x，y參數決定。
• scale的參數如果只有一個，則默認為等比例變化。（例如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)方法讓元素在平面上順時針旋轉，旋轉的角度由參數deg決定。deg可以為負值，deg為負時，為逆時針旋轉。
• rotate(deg)方法的旋轉平面是顯示器所在平面，本質上和rotateZ()方法的效果相同。

rotateX(deg)

• 使用方法

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

• 效果

  
  
• rotate(deg)方法讓元素在X軸方向上順時針旋轉，旋轉的角度由參數deg決定。deg可以為負值，deg為負時，為逆時針旋轉。

rotateY(deg)

• 使用方法

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

• 效果

  
  
• rotate(deg)方法讓元素在Y軸方向上順時針旋轉，旋轉的角度由參數deg決定。deg可以為負值，deg為負時，為逆時針旋轉。

transition

transition為我們添加了某種過渡效果，可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。它與animation的區別在于，transition是為變化的過程添加動畫，所以必須要有一個事件去觸發元素某個樣式的值的變化。
過渡動畫有以下幾個屬性：

其中，transition-timing-function有以下幾個值：

• 使用方法

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簡寫

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

• 效果
  點擊這里

• transition簡寫的屬性不一定要按照上面的順序來寫。屬性中第一個時間參數一定是過渡時間，第二個是延遲時間。transition-property如果沒有，默認為all。transition-timing-function默認為ease。

• transition還可以同時設置多個屬性。

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

• 通常transition和transform配合使用效果更佳。例如下面的代碼實現了鼠標懸停時元素放大的動畫效果：

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配合使用的例子請點擊這里，或者直接查看在線演示。

• transition的優點在于簡單易用，但是它有幾個很大的局限。
  （1）transition需要事件觸發，所以沒法在網頁加載時自動發生。
  （2）transition是一次性的，不能重復發生，除非一再觸發。
  （3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
  （4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。
  CSS animation就是為了解決這些問題而提出的。

animation

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

• 動畫的使用方法，首先用@keyframes創建動畫。例如：

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

當使用from to時，等同于定義了0% 到 100%的動畫過程，效果和transition相似。
但animation的強大之處，就是可以定義任何時刻任何階段的動畫。

@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;}
}

上面代碼的動畫效果如下 點擊這里。

• 當我們完成了動畫的創建，就需要將動畫綁定到選擇器上，讓元素擁有動畫效果。
  使用animation將定義的動畫myfirst綁定到div元素上。

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

這樣，div就擁有了動畫效果。

• 默認情況下，動畫只播放一次。加入infinite關鍵字，可以讓動畫無限次播放。

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

• 動畫結束以后，會立即從結束狀態跳回到起始狀態。如果想讓動畫保持在結束狀態，需要使用animation-fill-mode屬性。

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

forwards可以讓動畫停留在結束狀態。

• animation-fill-mode還可以使用下列值。
  • none：默認值，回到動畫沒開始時的狀態。
  • backwards：讓動畫回到第一幀的狀態。
  • both: 根據animation-direction（見后）輪流應用forwards和backwards規則。
• 動畫循環播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性，可以改變這種行為。animation-direction的默認值為normal。

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

以下為animation-direction所有值的動畫效果。

• 有時，動畫播放過程中，會突然停止。這時，默認行為是跳回到動畫的開始狀態。
  如果想讓動畫保持突然終止時的狀態，就要使用animation-play-state屬性。

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

animation還有許多屬性，具體請查看菜鳥教程CSS3動畫。

參考鏈接
菜鳥教程——CSS3教程
阮一峰——CSS動畫簡介