# 第 26 章 CSS3 動畫效果
學習要點:
1.動畫簡介
2.屬性詳解
3.簡寫和版本
主講教師:李炎恢
本章主要探討 HTML5?中 CSS3?的動畫效果,可以通過類似 Flash?那樣的關鍵幀模式控制運行。
**一.動畫簡介**
CSS3 提供了類似?Flash 關鍵幀控制的動畫效果,通過?animation 屬性實現。那么之前的 transition?屬性只能通過指定屬性的初始狀態和結束狀態來實現動畫效果,有一定的局限性。
animation 實現動畫效果主要由兩個部分組成:1.通過類似?Flash 動畫中的關鍵幀聲明一個動畫;2.在?animation 屬性中調用關鍵幀聲明的動畫。
CSS3 提供的?animation 是一個復合屬性,它包含了很多子屬性。如下表所示:
| **屬性** | **說明** |
| --- | --- |
| ?animation-name | 用來指定一個關鍵幀動畫的名稱,這個動畫名必須對應一個@keyframes?規則。CSS?加載時會應用 animation-name?指定的動畫,從而執行動畫。 |
| animation-duration | 用來設置動畫播放所需的時間 |
| animation-timing-function | 用來設置動畫的播放方式 |
| animation-delay | 用來指定動畫的延遲時間 |
| animation-iteration-count | 用來指定動畫播放的循環次數 |
| animation-direction | 用來指定動畫的播放方向 |
| animation-play-state | 用來控制動畫的播放狀態 |
| animation-fill-mode | 用來設置動畫的時間外屬性 |
| animation | 以上的簡寫形式 |
除了這 9?個屬性之外,動畫效果還有一個重要的屬性,就是關鍵幀屬性:@keyframes。它的作用是聲明一個動畫,然后在 animation?調用關鍵幀聲明的動畫。
//基本格式,“name”可自定義
```
@keyframes name {
/*...*/
}
```
**二.屬性詳解**
在講解動畫屬性之前,先創建一個基本的樣式。
//一個?div 元素
```
<div>我是 HTML5</div>
```
//設置?CSS
```
div { width: 200px; height: 200px; border: 1px solid green;
}
```
**1.@keyframes**
//創建動畫的第一步,先聲明一個動畫關鍵幀。
```
@keyframes myani { 0% {
margin-left:0px;
} 50% { margin-left:100px;
} 100% { margin-left:0px;
} }
```
//或者重復的,可以并列寫在一起
```
@keyframes myani { 0%, 100% {
margin-left:0px;
} 50% { background-color: black; margin-left:100px;
} }
```
**2.animation-name**
//調用@keyframes 動畫?
```
animation-name: myani;
```
| **屬性值** | **說明** |
| --- | --- |
| none | 默認值,沒有指定任何動畫 |
| INDEX | 是由@keyframes?指定創建的動畫名稱 |
**3.animation-duration**
//設置動畫播放的時間
```
animation-duration: 1s;
```
當然,以上通過關鍵幀的方式,這里插入了三個關鍵幀。0%設置了白色和左偏移為 0,和初始狀態一致,表明從這個地方開始動畫。50%設置了黑色,左偏移 100px。而 100%則是最后一個設置,又回到了白色和左偏移為 0。整個動畫就一目了然了。
而對于關鍵幀的用法,大部分用百分比比較容易控制,當然,還有其他一些控制方法。
//從什么狀態過渡到什么狀態
```
@keyframes myani { from {
margin-left:0px;
} to { margin-left:100px;
} }
```
**4.animation-timing-function**
//設置緩動
```
animation-timing-function: ease-in;
```


**5.animation-delay**
//設置延遲時間
```
animation-delay: 1s;?
```
**6.animation-iteration-count**
//設置循環次數
```
animation-iteration-count: infinite;?
```
| **屬性值** | **說明** |
| --- | --- |
| 次數 | 默認值為 1 |
| infinite | 表示無限次循環 |
**7.animation-direction**
//設置緩動方向交替
```
animation-direction: alternate;
```
| **屬性值** | **說明** |
| --- | --- |
| normal? | 默認值,每次播放向前 |
| alternate | ?一次向前,一次向后,一次向前,一次向后這樣交替 |
**8.animation-play-state**
//設置停止播放動畫?
```
animation-play-state: paused;
```
**9.animation-fill-mode**
//設置結束后不在返回?
```
animation-fill-mode: forwards;
```
| **屬性值** | **說明** |
| --- | --- |
| none | 默認值,表示按預期進行和結束 |
| forwards | 動畫結束后繼續應用最后關鍵幀位置,即不返回 |
| backforwards | 動畫結束后迅速應用起始關鍵幀位置,即返回 |
| both | 根據情況產生 forwards?或 backforwards?的效果 |
//both 需要結合,次數和播放方向?animation-iteration-count: 4; animation-direction: alternate;
**六.簡寫和版本**
//簡寫形式完整版
```
animation: myani 1s ease 2 alternate 0s both;
```
為了兼容舊版本,需要加上相應的瀏覽器前綴,版本信息如下表:
| | Opera | Firefox | Chrome | Safari | IE |
| --- | --- |
| 支持需帶前綴 | 15 ~ 29 | 5 ~ 15 | 4 ~ 42 | 4 ~ 8 | 無 |
| 支持不帶前綴 | 無 | 16+ | 43+ | 無 | 10.0+ |
?//兼容完整版,Opera 在這個屬性上加入?webkit,所以沒有
```
-o--webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both;
transition: all 1s ease 0s;
```
//@keyframes 也需要加上前綴?
```
@-webkit-keyframes myani {...} @-moz-keyframes myani {...} @-o-keyframes myani {...} @-ms-keyframes myani {...} keyframes myani {...}
```
- 介紹
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超鏈接和路徑
- 第 5 章 分組元素
- 第 6 章 表格元素
- 第 7 章 文檔元素
- 第 8 章 嵌入元素
- 第 9 章 音頻和視頻
- 第 10 章 表單元素[上]
- 第 10 章 表單元素[中]
- 第 10 章 表單元素[下]
- 第 11 章 全局屬性和其他
- 第 12 章 CSS 入門
- 第 13 章 CSS 選擇器[上]
- 第 14 章 CSS 顏色與度量單位
- 第 15 章 CSS 文本樣式[上]
- 第 15 章 CSS 文本樣式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 邊框與背景[上]
- 第 17 章 CSS 邊框與背景[下]
- 第 18 章 CSS 表格與列表
- 第 19 章 CSS 其他樣式
- 第 20 章 CSS3 前綴和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 邊框圖片效果
- 第 24 章 CSS3 變形效果[下]
- 第 25 章 CSS3 過渡效果
- 第 26 章 CSS3 動畫效果
- 第 27 章 CSS 傳統布局[上]
- 第 27 章 CSS 傳統布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 彈性伸縮布局[上]
- 第 29 章 CSS3 彈性伸縮布局[中]
- 第 29 章 CSS3 彈性伸縮布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介紹
- 第 2 章 排版樣式
- 第 3 章 表格和按鈕
- 第 4 章 表單和圖片
- 第 5 章 柵格系統
- 第 6 章 輔組類和響應式工具
- 第 7 章 圖標菜單按鈕組件
- 第 8 章 輸入框和導航組件
- 第 9 章 路徑分頁標簽和徽章組件
- 第 10 章 巨幕頁頭縮略圖和警告框組件
- 第 11 章 進度條媒體對象和 Well 組件
- 第 12 章 列表組面板和嵌入組件
- 第 13 章 模態框插件
- 第 14 章 下拉菜單和滾動監聽插件
- 第 15 章 標簽頁和工具提示插件
- 第 16 章 彈出框和警告框插件
- 第 17 章 按鈕和折疊插件
- 第 18 章 輪播插件
- 第 19 章 附加導航插件
- 第 20 章 項目實戰--響應式導航[1]
- 第 20 章 項目實戰--響應式輪播圖[2]
- 第 20 章 項目實戰--首頁內容介紹[上][3]
- 第 20 章 項目實戰--首頁內容介紹[下][4]
- 第 20 章 項目實戰--資訊內容[5,6]
- 第 20 章 項目實戰--案例和關于[7]
- javaScript 教程
- javascript快速入門1--JavaScript前世今生,HelloWorld與開發環境
- javascript快速入門2--變量,小學生數學與簡單的交互
- javascript快速入門3--分支判斷與循環
- javascript快速入門4--函數與內置對象
- javascript快速入門5--數組與對象
- javascript快速入門6--Script標簽與訪問HTML頁面
- javascript快速入門7--ECMAScript語法基礎
- javascript快速入門8--值,類型與類型轉換
- javascript快速入門9--引用類型
- javascript快速入門10--運算符,語句
- javascript快速入門11--正則表達式
- javascript快速入門12--函數式與面向對象
- javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model)
- javascript快速入門14--DOM基礎
- javascript快速入門15--節點
- javascript快速入門15--表單
- javascript快速入門16--表格
- javascript快速入門17--事件
- javascript快速入門18--樣式
- javascript快速入門19--定位
- javascript快速入門20--Cookie
- javascript快速入門21--DOM總結
- javascript快速入門22--Ajax簡介
- javascript快速入門23--XHR—XMLHttpRequest對象
- javascript快速入門24--XML基礎
- javascript快速入門25--瀏覽器中的XML
- javascript快速入門26--XPath
- javascript快速入門27--XSLT基礎
- PHP 教程
- 第一章 如何加載運行已發布的PHP項目
- 第二章 PHP基礎
- 第三章 操作符與控制結構
- 第四章 數學運算
- 第五章 數組
- 第六章 目錄與文件
- 第七章 自定義函數
- 第八章 字符串處理
- 第九章 正則表達式
- 第十章 日期與時間
- 第十一章 表單與驗證
- 第十二章 會話控制
- 第十三章 上傳文件
- 第十四章 處理圖像
- 第十五章 MySQL 數據庫
- 第十六章 PHP 操作MySQL
- 第十七章 面向對象基礎
- 第十八章 面向對象的特性
- 第十九章 面向對象的工具