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 將其與動畫目標元素關聯起來。

p { 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技術手工的實現。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程