CSS動畫：keyframes用法介紹

在CSS動畫中，使用Transition技術是一種“隱式”的動畫方法，而相對應的，還有一種“顯式”的動畫技術，就是，你可以在CSS里直接指定動畫效果，這需要使用 keyframes 屬性了。

演示：秋葉飄落動畫

上面這個”秋葉飄落動畫”的CSS動畫演示應該是十分的精彩，充分展示了CSS動畫的優異特性。

下面我們來一步一步介紹如何制作 keyframes 動畫，先從一個會彈跳的盒子入手。

演示：會彈跳的盒子

用CSS聲明這樣的動畫效果非常簡單。首先，用 @keyframes 描述動畫效果規則。

@keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

在一個 @keyframes 代碼塊里，包含著一系列的CSS規則，統稱為 keyframes。 一個 keyframe 定義了一個完整動畫里某一時刻的一種動畫樣式。動畫繪制引擎會連貫平滑的實現各種樣式間的轉換。在上面的被定義為 “bounce” 的動畫中，有兩個 keyframes: 一個是動畫的起始狀態( “from” 代碼塊) 和終止狀態 ( “to” 代碼塊)。

一旦定義完成了動畫后，我們就可以使用 animation-name 將其與動畫目標元素關聯起來。

div {
 animation-name: bounce;
 animation-duration: 4s;
 animation-iteration-count: 10;
 animation-direction: alternate;
}

上面的這段CSS規則中就綁定了 “bounce” 動畫，而且還設定了動畫持續時間為 4 秒鐘，一共執行10次，而且間隔著反向執行一次。

下面，我們要制作一個更復雜的動畫，涉及到旋轉、背景色、透明度等技術，需要用到多個 keyframes。

@keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 animation-name: pulse;
 animation-duration: 4s;
 animation-direction: alternate;
 animation-timing-function: ease-in-out;
}

觀看演示

這里的Keyframes使用了百分比，分別表示動畫的各個階段的動作場景。而之前的 “from” 和 “to” 關鍵詞其實等效于 “0%” 和 “100%” 。

CSS Keyframes動畫的目的是提供WEB開發者更簡單的創作豐富多彩的頁面效果的途徑。大多數的動畫效果都是表現性質的，因此屬于瀏覽器樣式系統。程序員通過簡單的聲明樣式就能創作出這些效果動畫，完全替代了之前用JavaScript技術手工的實現。