CSS3Keyframes把玩

上週學習了利用 CSS3 來製作頁面動畫，完成了下載頁面動畫的開發。

入門

按照需求要實現“漸顯 FadeIn”的效果。最簡單的情況下，使用 transition 即可實現效果：

transition: opacity 500ms;
opacity: 0;/* 修改 opacity 透明度為 1 完全顯示 */

不過略為麻煩的時候，無論是為元素插入一個 class 新樣式還是直接修改元素的 style.opacity = 1;，都必須經過 JavaScript 來控制。實際上 CSS 可獨立完成，無須藉助 JS。CSS 3 提供了 keyframe 規則控制以”時間軸”為控制手段的動畫機制,有點類似以前的 Flash 時間軸和關鍵幀概念.

如果利用 keyframe 實現漸顯，首先先定義  keyframes 的名稱和 from 起始狀態和結束狀態 to，分別設定透明為 0 和 1。

@-webkit-keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}

然後在具體那個元素身上指定關鍵幀名稱即可套用效果。

-webkit-animation-name: fadeIn;

動畫預設自動執行，但可以延時執行，如下設定所示。

-webkit-animation-delay: 3s;
-webkit-animation-duration:.5s; // 動畫作用時間;

通常伴著隨更豐富的其它選項：

-webkit-animation-iteration-count: 1; // 播放次數，預設 1，設定 infinite 則無限播放
-webkit-animation-direction: alternate; // 播放方向
-webkit-animation-fill-mode: forwards; // 完成一次動畫後是否再重複，這裡 forwards 表示不重複

前面說到動畫自動執行，如果不希望自動執行，可設定 -webkit-animation-play-state: paused 暫停，然後修改其為 running 便開始執行動畫（通常這步由 JS 觸發）。

el.style.webkitAnimationPlayState = "running";

值得一提的是，keyframes 對於 display:none/block 的元素自動實施效果，這樣場景切換的時候十分方面，無須開發者額外為這一層邏輯進行編碼！

定義關鍵幀

類似 Flash，CSS3 也有關鍵幀的概念。例子如下：

@-webkit-keyframes fadeInRight { 
  0% { opacity: 0; -webkit-transform: translateX(0%); }
  100% { opacity: 1; -webkit-transform: translateX(-108%); }
}
@-moz-keyframes fadeInRight { 
  0% { opacity: 0; -moz-transform: translateX(20px); }
  100% { opacity: 1; -moz-transform: translateX(0px); }
}
@-o-keyframes fadeInRight { 
  0% { opacity: 0; -o-transform: translateX(20px); }
  100% { opacity: 1; -o-transform: translateX(0px); }
}
@keyframes fadeInRight { 
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

.fadeInRight{
	-webkit-animation-name:fadeInRight;
	-moz-animation-name:fadeInRight;
	-o-animation-name:fadeInRight;
	animation-name:fadeInRight;
}

利用 CSS 庫

實際上現在看到不少的炫目 H5 頁面如這個，都是用 CSS 庫快速開發的，自己在 Firebug 複製一個個樣式豈不是會累si？Animate.css 是一個流行的庫，但直接引用會有冗餘的 CSS，於是我想到了 LESS.js。果然是有人整合 Animate.css 到 LESS 了，這下就方便多了。而且還是國人作品，詳見這裡。（這裡有一個更直觀的例子，請點選）

使用方法，mixin 樣式，然後定義 .animation 有關動畫的引數（如本文介紹）。

.box{
  .bounceIn(); // 其中動畫名還可以設定具體的引數
  .animation(bounceIn 1s linear infinite);
}