CSS3 中的動畫屬性
阿新 • • 發佈：2022-04-12
一、動畫屬性和描述
| 屬性 | 描述 |
|---|---|
| @keyframes | 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用。 |
| animation | 複合屬性。檢索或設定物件所應用的動畫特效。 |
| animation-name | 檢索或設定物件所應用的動畫名稱 ,必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義 |
| animation-duration | 檢索或設定物件動畫的持續時間 |
| animation-timing-function | 檢索或設定物件動畫的過渡型別 |
| animation-delay | 檢索或設定物件動畫的延遲時間 |
| animation-iteration-count | 檢索或設定物件動畫的迴圈次數 |
| animation-direction | 檢索或設定物件動畫在迴圈中是否反向運動 |
| animation-play-state | 檢索或設定物件動畫的狀態 |
二、屬性詳解
1. @keyframes :用來建立動畫，在動畫過程中，可以隨意修改動畫的樣式。要想有動畫效果必須在動畫發生時使用 ％，或關鍵字 "from" 和 "to"（和0％到100％相同），其中 0％ 是開頭動畫，100％ 是完成動畫，這裡推薦使用 0% 和 100%：
@keyframes mymove { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} }
2. animation : 複合屬性
//語法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
3. animation-timing-function：指定動畫將如何完成一個週期
| 值 | 描述 |
|---|---|
| linear | 動畫從頭到尾的速度是相同的。 |
| ease | 預設。動畫以低速開始，然後加快，在結束前變慢。 |
| ease-in | 動畫以低速開始。 |
| ease-out | 動畫以低速結束。 |
| ease-in-out | 動畫以低速開始和結束。 |
4. animation-delay 定義動畫開始前等待的時間。
5. animation-iteration-count 規定動畫的迴圈次數
| 值 | 描述 |
|---|---|
| n | 一個數字，定義應該播放多少次動畫 |
| infinite | 指定動畫應該播放無限次（永遠） |
6. animation-direction 定義是否迴圈交替反向播放動畫
| 值 | 描述 |
|---|---|
| normal | 預設值。動畫按正常播放。 |
| reverse | 動畫反向播放。 |
| alternate | 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 |
| alternate-reverse | 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 |
7. animation-play-state 指定動畫執行或暫停
| 值 | 描述 |
|---|---|
| paused | 指定暫停動畫 |
| running | 指定正在執行的動畫 |
筆記源於 RUNOOB