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方向不能用百分比表示），例如：

transform: translateX(100px) translateY(50%) translateZ(-100px);
// 或者簡寫
transform: translate3d(100px, 50%, 2em);

注意：

1. translate是xy平面內的2維平移，translate3d是xyz空間內的三維平移；
2. translate也能夠單獨書寫，如 translate: 50% 105px 5rem;，可是該特性尚在實驗階段，不少瀏覽器不支持，因此現階段仍是配合transform使用。詳情參考 MDN translate。

(2) Scale

Scale意爲「縮放」，顧名思義，是用於改變元素的大小。例如：

transform: scaleX(2) scaleY(0.5) scaleZ(1);
// 或者簡寫
transform: scale3d(2, 0.5, 1);

scale方法接收任意數字（正負整數、小數、0）做爲參數，該參數爲縮放係數，係數>1 效果爲放大，0<係數<1 效果爲縮小，係數=0 元素尺寸變爲無限小而不可見，係數<0 效果爲 >0 時的鏡像（具體效果可本身實驗）。

與translate相似，scale也有2維 scale() 和三維 scale3d()之分，也能夠單獨書寫，此處不贅述。

(3) Rotate

Rotate意爲「旋轉」，支持將元素以x、y、z爲軸旋轉，旋轉正方向爲面朝座標軸正向逆時針方向，可參考上面座標系示意圖。rotate方法接收一個角度做爲參數，角度>0 正向旋轉，角度<0 負向旋轉，例如：

// 默認繞z軸旋轉
transform: rotate(90deg);

transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

與translate和scale不一樣，rotate不能簡寫爲transform: rotate3d(30deg, 60deg, 90deg)的形式，rotate3d的用法爲：前三個參數爲數字，表明x、y、z方向的向量，相加獲得向量v，第四個參數爲角度，表示以向量v爲軸逆時針旋轉的角度，語法以下：

transform: rotate3d(1, 2, 3, 90deg);

與translate和scale相似，rotate也能夠做爲單獨的css屬性，但還在實驗階段。

出於篇幅考慮，我只列出三種最經常使用的tranform function，剩下的transform function請參考 MDN transform function。

(4) 組合

咱們能夠將不一樣的transform方法組合起來使用，如：

transform: translateY(200px) rotateZ(90deg) scale(3);

組合方法的執行順序是從右往左，即先執行scale，而後rotate，最後translate，產生的效果是逐次累加的。方法書寫的順序對最後效果有很大的影響，看下面例子，沿y軸平移和放大，順序不一樣，產生的結果有明顯差異：

若是先translate再scale，平移的距離也將被等比例縮放，而先scale再translate則不會。因此在使用transform需按照 translate -> rotate -> scale 的順序書寫，讓scale先執行，以避免放大translate的效果，而rotate先translate執行以防止帶着平移的距離一塊兒轉動。我以爲這是transform目前不方便的地方，由於方法之間相互干擾並不容易理解，書寫順序也不容易記住。在將來有望經過使用獨立的css transform屬性解決這一問題，由於獨立的transform屬性對書寫順序沒有依賴，方法之間彼此不會干擾。

Transition

Transition翻譯爲「過渡」，強調的是過程。在css中指在一段時間內，元素從一個狀態（對應一個css屬性）過渡到另外一個狀態的動態過程。咱們能夠決定以何種方式過渡過渡和花費多少時間。

例如，咱們把鼠標懸浮到雲上面的時候使其變大一些能夠這麼寫：

.cloud{
    width: 240px;
    transition: 1s;
}
.cloud:hover{
    width: 320px;
}

效果：

transition能夠和transform結合使用，好比咱們可讓雲變大的同時轉一圈：

.cloud:hover{
    width: 320px;
    transform: rotate(360deg);
}

效果：

咱們能夠給不一樣的效果設置不一樣的過渡時間：

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s;
}

咱們也能夠給效果設置延時時間，好比咱們等寬度增大以後再旋轉：

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s 1s;
}

效果：

咱們還能夠給每一個效果設置不一樣的timing function，用於控制加速效果。

好比咱們可讓旋轉的速度逐漸加快：

.cloud{
    width: 240px;
    transition: transform 2s ease-in;
}

.cloud:hover{
    transform: rotate(1080deg);
}

效果：

更多的timing function請後面會進一步討論，也能夠參考 MDN transition-timing-functions

Keyframes

(1) 基本用法

Keyframe中文譯爲「關鍵幀」，是animation中很強大的功能，通俗說就是咱們能夠經過定義一段動畫中的關鍵點、關鍵狀態來建立動畫。Keyframes相比transition對動畫過程和細節有更強的控制。

咱們先看一個例子（部分代碼省略）

html:

<div class="sky"></div>
<div class="grass"></div>
<div class="road">
  <div class="lines"></div>
  <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="mario animated">
</div>

css：

.mario{
  position: absolute;
  left: 0px;
  width: 100px;
}

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(0) }
  to{ transform: translateX(700px) }
}

效果：

其中 drive 是該keyframes的名稱，from, to 是keyframes播放過程的時間起點和終點，時間點也能夠用百分比表示，如50%，from， to 等價於 0%, 100%。每一個時間點對應一個css狀態，表明一個關鍵幀（keyframe）。keyframes定義完成後使用方法以下：

animation也有簡寫形式，如：

animation: slidein 3s ease-in 1s infinite reverse both running;

但這種對書寫順序有必定要求（delay要寫在duration後面，其餘參數無順序要求，css會經過傳入的關鍵詞識別）。

(2) Animation Delay

經過animation-delay，咱們能夠給動畫延遲執行：

animation-delay: 2s;

(3) Animation Fill Mode

forwards

在上面的例子中能夠看到馬里奧運動到右邊以後又回到了起點，若是咱們想讓他運動完成後就停留在右邊呢？很簡單，咱們設置annimation fill mode就能夠了：

animation-fill-mode: forwards

forwards 表示動畫完成後，元素將保持最後一幀的狀態。

backwards

與之相對的還有 backwards，backwards表示並非動畫完成後元素變回第一幀的狀態，而是表示當設置了animation-delay時，在動畫開始前的等待過程當中，馬上給元素應用第一幀的狀態。咱們將上面的例子稍做修改看一下效果：

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-fill-mode: backwords;
  animation-delay: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(350px) }
  to{ transform: translateX(700px) scale(2) }
}

效果：

能夠看到，動畫開始以前小人立馬移動到350px處，1s以後纔開始動畫。

both

顯而易見，both會同時應用forwards和backwards兩種規則，即在delay時先應用第一幀的狀態，結束時保持最後一幀的狀態。

(3) Animation Repeat

咱們能夠經過 animation-iteration-count 設置動畫循環播放的次數，好比：

animation-iteration-count: 3;

// 無限循環
animation-iteration-count：infinite;

就像這樣：

(4) Animation Direction

normal

正常方向，也是默認方向，即先from，再to。

reverse

與正常方向相反，即先to，再from。例如：

.animated{
  ...
  
  animation-direction: reverse;
}

@keyframes drive {
  from{ transform: translateX(-100px) rotateY(180deg) }
  to{ transform: translateX(862px) rotateY(180deg)}
}

效果：

alternate

alternate意爲「交替」，即normal和reverse交替之行，先normal再reverse。

reverse alternate

反向交替，先reverse再normal。

(4) Animation Timing function

和transition同樣，keyframes也能夠設置timing function，經常使用的timing function概括以下：

1. ease：默認方法，初速度較慢，而後加速再減速
2. ease-in：初速度最慢，而後一直加速
3. ease-out：初速度最快，而後一直減速
4. ease-in-out：初速度較慢，而後加速再減速，與ease的區別在於加速減速過程是對稱的
5. linear：恆速運動

直觀表現以下（codepen）：

除了上面現成的方法，咱們能夠經過貝塞爾曲線自定義速度曲線。咱們能夠在 http://cubic-bezier.com 可視化的建立咱們本身的貝塞爾曲線。好比建立一個剛開始極慢，忽然變得極快的曲線：

css:

animation-timing-function: cubic-bezier(1,.03,1,-0.03);

效果：

是否是挺神奇！

(5) Chain Animation

咱們能夠將多個animation串聯使用，好比咱們想讓小人在行駛的過程當中跳躍，能夠這麼寫：

css:

.mario {
  ...
  
  animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;
}

@keyframes jump {
  0% { top: -40px; }
  50% { top: -120px; }
  100% { top: -40px; }
}

效果：

實踐

本文目的在於普及css3 animation的基礎，並未徹底覆蓋animation的知識，未涉及和講解的知識請你們見諒 。 掌握上述知識後，咱們就已經能夠用animation作出豐富的動畫效果了，下面列出一些codepen上的小例子：

1. full mario demo
2. animated popup
3. fly items to shopping cart
4. flipping cards