在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線上手冊
#以上是CSS Keyframes動畫實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
