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影片教學

#

以上是CSS Keyframes動畫實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！