CSS3中有兩種方式實現動畫，transition和animation+@keyframe。
兩者的作用機制不一樣：transition定義在可能要進行動畫的元素上，對某些CSS屬性進行監聽，一旦CSS改變則進行動畫；animation定義在馬上要進行動畫的元素上，一旦定義動畫即進行。
比如當鼠標懸浮的時候，某元素由紅色改為綠色。使用transition和animation實現的共同代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; height: 200px; background-color: red; /*不同的代碼*/ } div:hover { /*不同的代碼*/ } </style> </head> <body> <div></div> </body> </html>
使用transition的代碼量更少，簡介直觀。
div { width: 300px; height: 200px; background-color: red; transition: background-color 2s; } div:hover { background-color: green; }
其中transition可作為監聽器，監聽background-color的改變，一旦改變則之前的值作為初始狀態，后來的值作為終止狀態，進行整個過渡動畫。
使用animation先要定義各種時間段的狀態，這里只需要定義開始時間和結束時間，這個定義放在@keyframes中，anmation再調用這個keyframes。
div { width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s forwards; } div:hover { -webkit-animation: test2 2s forwards; } @-webkit-keyframes test1 { from {background-color: green;} to {background-color: red;} } @-webkit-keyframes test2 { from {background-color: red;} to {background-color: green;} }
這里定義了兩套動畫和關鍵幀，一套應用於普通狀態，一套應用於鼠標懸浮狀態。而且開始狀態的CSS和元素之前的CSS沒關系，需要重新定義。更需要注意的是，animation的表現和transition有一點不同，在頁面加載后會先執行普通狀態下的動畫一次。乍看一下，似乎animation完全不如transition好用，對於這個簡單的需求確實如此，但animation可以應付一些更復雜的需求。
以下先從簡單的開始，也就是transition。
transition的意思不是動畫，而是過渡，從一個狀態過渡到另一個狀態。這意味着這個動畫的執行包含三個要素，初始狀態、過渡、終止狀態。簡單的結構意味着簡單的實現和受限制的功能。transiton只包含四個屬性：
- transition-property: 要監聽的CSS屬性，如果有多個屬性，用逗號分隔，且不能用transition簡寫。
- transition-duration: 動畫執行的時間。
- transition-timing-function: 動畫執行的方式。linear（勻速） | ease（先快后慢，默認值） | ease-in（先慢后快） | ease-out（先快后慢） | ease-in-out（先慢中快后慢） | cubic-bezier(n, n, n, n) （貝塞爾曲線）
- transition-delay: 動畫延遲執行的時間。
首先用transition-property監聽多個屬性，代碼如下：
div { width: 300px; height: 200px; background-color: red; transition-property: background-color, width; transition-duration: 2s; } div:hover { background: green; width: 500px; }
如果想移出鼠標不要立即執行動畫，而是等0.5秒，則代碼如下：
div { width: 300px; height: 200px; background-color: red; transition-property: background-color, width; transition-duration: 2s; transition-delay: .5s; } div:hover { background: green; width: 500px; transition-delay: 0; }
transition-delay需要定義在普通狀態下的CSS中，因為移開鼠標后div立即恢復到普通狀態，讀取的是普通狀態下的CSS屬性。另外普通狀態下的CSS屬性會應用到hover狀態下，導致鼠標懸浮的動畫也延遲了0.5s，所以要在hover狀態下將此屬性定義為0。
可以看出，懸浮鼠標和移出鼠標都會執行動畫是因為定義在div中的transition-property和transition-duration同樣作用在了div:hover中，所以可以定義transition: none移除某一階段的動畫。比如：
div { width: 300px; height: 200px; background-color: red; transition-property: background-color, width; transition-duration: 2s; } div:hover { background: green; width: 500px; transition-property: none; }
上面移除了懸浮鼠標的動畫效果。
可見，定義在元素上的transition是可以作用於其偽類的，並在偽類狀態下再度運行動畫，那么animation是不是一樣呢，比如：
div { width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s forwards; } @-webkit-keyframes test1 { from {background-color: green;} to {background-color: red;} }
鼠標懸浮時是否會執行動畫？還有，如果涉及到幾個屬性的變化時，屬性1的動畫設置為2s，屬性2的動畫設置為3s，使用transition能不能實現呢？
下一篇animation將會解釋其不同的工作方式。