10分鐘入門CSS3 Animation
簡介
Animation可以讓你不用依賴javascript或jquery ， 用純CSS在網頁中輕松實現各種動畫效果 。
兼容性
animation在絕大部分主流瀏覽器都得到了很好的支持!還在兼容IE9的同學要謹慎使用 。
CSS 坐標系
在了解animtion之前 ， 我們有必要先了解css的坐標系 ， 因為很多的animation效果都和元素的坐標密切相關 。在css3中網頁不再是一個二維平面，而是一個三維空間，水平方向、豎直方向和垂直屏幕方向分別對應三維坐標系的x，y，z軸，如下圖所示 。箭頭方向為正向，反之為負向(注意y軸方向與常規笛卡爾坐標系相反) 。
Animations
1. Transforms
transform中文譯為“轉換”，但我更傾向于稱呼它“變形”(大名鼎鼎的變形金剛叫transformer) 。我們可以使用transform function使html元素產生各種各樣的變形，比如平移、縮放、旋轉、扭曲等，而且不會影響正常的文檔流(document flow) 。
(1) Translate
Translate一般譯為“翻譯” ， 但在css里面一般用作“平移”，因為translate用于改變html元素的在3d坐標系位置 。translate支持在坐標系內任意方向移動(通過任意組合x、y、z方向的向量)，單位可以是長度單位和百分比(百分比是相對于被平移的元素自身尺寸 ， x軸是相對于width，y軸是相對于height，而在z軸方向由于元素是沒有‘厚度’的，所以對于z方向不能用百分比表示)，例如：
注意：
(2) Scale
Scale意為“縮放”，顧名思義，是用于改變元素的大小 。例如：
(3) Rotate
Rotate意為“旋轉”，支持將元素以x、y、z為軸旋轉 ， 旋轉正方向為面朝坐標軸正向逆時針方向，可參考上面坐標系示意圖 。rotate方法接收一個角度作為參數 ， 角度>0 正向旋轉，角度<0 負向旋轉，例如：
(4) 組合
我們可以將不同的transform方法組合起來使用，如：
組合方法的執行順序是從右往左 ， 即先執行scale，然后rotate，最后translate，產生的效果是逐次累加的 。方法書寫的順序對最后效果有很大的影響，看下面例子，沿y軸平移和放大，順序不同 ， 產生的結果有明顯差別：
如果先translate再scale，平移的距離也將被等比例縮放，而先scale再translate則不會 。所以在使用transform需按照 translate -> rotate -> scale 的順序書寫，讓scale先執行，以免放大translate的效果，而rotate先translate執行以防止帶著平移的距離一起轉動 。我覺得這是transform目前不方便的地方，因為方法之間相互干擾并不容易理解，書寫順序也不容易記住 。在未來有望通過使用獨立的css transform屬性解決這一問題 ， 因為獨立的transform屬性對書寫順序沒有依賴，方法之間彼此不會干擾 。
Transition
Transition翻譯為“過渡”，強調的是過程 。在css中指在一段時間內，元素從一個狀態(對應一個css屬性)過渡到另一個狀態的動態過程 。我們可以決定以何種方式過渡過渡和花費多少時間 。
例如，我們把鼠標懸浮到云上面的時候使其變大一些可以這么寫：
效果：
transition可以和transform結合使用 ， 比如我們可以讓云變大的同時轉一圈：
效果：
我們可以給不同的效果設置不同的過渡時間：
我們也可以給效果設置延時時間，比如我們等寬度增大之后再旋轉：
效果：
我們還可以給每個效果設置不同的timing function，用于控制加速效果 。
比如我們可以讓旋轉的速度逐漸加快：
效果：
更多的timing function請后面會進一步討論 ， 也可以參考 MDN transition-timing-functions
Keyframes
(1) 基本用法
Keyframe中文譯為“關鍵幀”，是animation中很強大的功能 ， 通俗說就是我們可以通過定義一段動畫中的關鍵點、關鍵狀態來創建動畫 。Keyframes相比transition對動畫過程和細節有更強的控制 。
我們先看一個例子(部分代碼省略)
html:
css：
效果：
但這種對書寫順序有一定要求(delay要寫在duration后面，其他參數無順序要求，css會通過傳入的關鍵詞識別) 。
(2) Animation Delay
【10分鐘入門CSS3 Animation】
(3) Animation Fill Modeforwards
在上面的例子中可以看到馬里奧運動到右邊之后又回到了起點，如果我們想讓他運動完成后就停留在右邊呢?很簡單，我們設置annimation fill mode就可以了：
backwards
效果：
可以看到，動畫開始之前小人立馬移動到350px處，1s之后才開始動畫 。
both
顯而易見，both會同時應用forwards和backwards兩種規則 ， 即在delay時先應用第一幀的狀態，結束時保持最后一幀的狀態 。
(3) Animation Repeat
就像這樣：
(4) Animation Direction
normal
正常方向 ， 也是默認方向，即先from，再to 。
reverse
與正常方向相反，即先to ， 再from 。例如：
效果：
alternate
alternate意為“交替”，即normal和reverse交替之行 ， 先normal再reverse 。
reverse alternate
反向交替 ， 先reverse再normal 。
(4) Animation Timing function
和transition一樣，keyframes也可以設置timing function，常用的timing function歸納如下：
ease：默認方法 ， 初速度較慢，然后加速再減速
ease-in：初速度最慢，然后一直加速
ease-out：初速度最快，然后一直減速
ease-in-out：初速度較慢，然后加速再減速，與ease的區別在于加速減速過程是對稱的
linear：恒速運動
直觀表現如下(codepen)：
除了上面現成的方法，我們可以通過貝塞爾曲線自定義速度曲線 。我們可以在 http://cubic-bezier.com 可視化的創建我們自己的貝塞爾曲線 。比如創建一個剛開始極慢，突然變得極快的曲線：
css:
效果：
是不是挺神奇!
(5) Chain Animation
我們可以將多個animation串聯使用，比如我們想讓小人在行駛的過程中跳躍，可以這么寫：
css:
效果：
實踐
本文目的在于普及css3 animation的基礎，并未完全覆蓋animation的知識，未涉及和講解的知識請大家見諒。掌握上述知識后，我們就已經可以用animation做出豐富的動畫效果了，下面列出一些codepen上的小例子：
full mario demo
animated popup
fly items to shopping cart
flipping cards
