CSS3 Transition, transform 和 animation 介紹

CSS3 提供了transition 過渡、transform 變換和animation 動畫來實現頁面中的一些樣式轉化，這篇文章會對這幾個屬性作簡單的介紹，而後比較一下 CSS3 動畫和 JS 動畫哪一個性能更好。

Transition, transform 和 animation 介紹

transition

transition容許css的屬性值在必定的時間區間內平滑地過渡，語法以下：

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

1. transition-property
   用來指定執行transition效果的屬性，能夠爲 none,all或者特定的屬性。
2. transition-duration
   動畫執行的持續時間，單位爲s（秒）或者 ms（毫秒）。
3. transition-timing-function
   變換速率效果，可選值爲ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定義時間曲線）。
4. transition-delay
   用來指定動畫開始執行的時間，取值同transition-duration，可是能夠爲負數。

DEMO:http://codepen.io/CodingMonkeyzh/pen/ZGBRVe

transform

transform 分爲2D 和 3D，這裏暫時只介紹比較經常使用的2D transform，其主要包含如下幾種變換：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix，語法以下：

transform: rotate | scale | skew | translate |matrix;

• rotate 旋轉
  rotate 的單位是deg 度，正數表示順時針旋轉，負數表示逆時針旋轉。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/XbNYOa
• scale 縮放
  scale 的取值範圍是0~n，小於1時表示縮小，反之表示放大。例如scale(0.5, 2)表示水平方向縮小1倍，垂直方向放大1倍， 另外，也能夠經過scaleX或者scaleY對一個方向進行設置。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/doOKrg
• skew 扭曲
  skew 的單位跟rotate同樣都是deg 度。例如 skew(30deg, 10deg)表示水平方向傾斜30度，垂直方向傾斜10度。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/KpNeYg
• translate 偏移
  偏移一樣包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/waoXbB

animation

CSS3 中的 animation 是經過一個叫Keyframes 關鍵幀的玩意來控制的，他的命名是由"@keyframes"開頭，後面緊接着是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不一樣時間段樣式規則，有點像咱們css的樣式寫法同樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如「0%」到"100%"之間，語法以下：

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或者所有寫成百分比的形式： 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

animation和transition同樣有本身相對應的屬性，那麼在animation主要有如下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面對其中的一些屬性進行解釋：

• animation-name 關鍵幀名
  用來定義一個動畫的名稱，也就是由前面的keyframes建立的動畫名，默認值爲none，當值爲none時，將沒有任何動畫效果。若是咱們要同時附幾個animation給一個元素，只要用逗號,隔開便可。
• animation-iteration-count 動畫循環次數
  默認爲1，若是要進行無限循環，只要設爲infinite便可。
• animation-direction 動畫播放的方向
  其只有兩個值，默認值爲normal，若是設置爲normal時，動畫的每次循環都是向前播放；另外一個值是alternate，他的做用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
• animation-play-state 播放狀態
  其主要有兩個值，running和paused，其中running爲默認值。能夠經過paused將正在播放的動畫停下了，也能夠經過running將暫停的動畫從新播放。這個屬性不經常使用。

DEMO 1: http://codepen.io/CodingMonkeyzh/pen/mJOKZY

DEMO 2: http://codepen.io/CodingMonkeyzh/pen/EjNpaE