例如，我們把鼠標懸浮到云上面的時候使其變大一些可以這么寫：
效果：
transition可以和transform結(jié)合使用，比如我們可以讓云變大的同時轉(zhuǎn)一圈：
效果：
我們可以給不同的效果設(shè)置不同的過渡時間：
我們也可以給效果設(shè)置延時時間，比如我們等寬度增大之后再旋轉(zhuǎn)：
效果：
我們還可以給每個效果設(shè)置不同的timing function，用于控制加速效果 。
比如我們可以讓旋轉(zhuǎn)的速度逐漸加快：
效果：
更多的timing function請后面會進一步討論，也可以參考 MDN transition-timing-functions
Keyframes
(1) 基本用法
Keyframe中文譯為“關(guān)鍵幀”，是animation中很強大的功能，通俗說就是我們可以通過定義一段動畫中的關(guān)鍵點、關(guān)鍵狀態(tài)來創(chuàng)建動畫 。Keyframes相比transition對動畫過程和細節(jié)有更強的控制 。
我們先看一個例子(部分代碼省略)
html:
css：
效果：
但這種對書寫順序有一定要求(delay要寫在duration后面，其他參數(shù)無順序要求，css會通過傳入的關(guān)鍵詞識別) 。
(2) Animation Delay
(3) Animation Fill Modeforwards
在上面的例子中可以看到馬里奧運動到右邊之后又回到了起點，如果我們想讓他運動完成后就停留在右邊呢?很簡單，我們設(shè)置annimation fill mode就可以了：
backwards
【10分鐘入門CSS3 Animation】效果：
可以看到，動畫開始之前小人立馬移動到350px處，1s之后才開始動畫 。
both
顯而易見，both會同時應(yīng)用forwards和backwards兩種規(guī)則，即在delay時先應(yīng)用第一幀的狀態(tài)，結(jié)束時保持最后一幀的狀態(tài) 。
(3) Animation Repeat
就像這樣：
(4) Animation Direction
normal
正常方向，也是默認方向，即先from，再to 。
reverse
與正常方向相反，即先to，再from 。例如：
效果：
推薦閱讀
- 多普達568新手入門
- css3.0新屬性效果在ie下的解決方案介紹
- 新手入門如何查看903sh版本
- 讓IE6/IE7/IE8支持CSS3屬性的辦法有哪些？支持CSS3屬性8種方法介紹
- 3250新手入門
- 讓IE6、IE7、IE8支持CSS3的圓角、陰影樣式
- ie-css3.htc 讓IE6, 7, and 8也支持box-shadow
- 主要針對566以及586等Q屏手機 給smartphone新手入門和軟件推薦
- 解讀MOTO ROKR E2之入門使用
- IE下實現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法