CSS 動畫
CSS 動畫
CSS 允許在不使用 JavaScript 的情況下為 HTML 元素製作動畫！
在本章中，您將學習以下屬性
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
動畫的瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
什麼是 CSS 動畫？
動畫讓元素從一種樣式逐漸變為另一種樣式。
您可以根據需要多次更改任意數量的 CSS 屬性。
要使用 CSS 動畫，您必須首先為動畫指定一些關鍵幀。
關鍵幀包含元素在特定時間將具有的樣式。
@keyframes 規則
當您在 @keyframes 規則中指定 CSS 樣式時，動畫將在特定時間從當前樣式逐漸變為新樣式。
要使動畫生效，您必須將動畫繫結到一個元素上。
以下示例將 "example" 動畫繫結到 <div> 元素。動畫將持續 4 秒，它將逐漸將 <div> 元素的背景顏色從 "red" 更改為 "yellow"。
示例
/* 動畫程式碼 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 應用動畫的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
自己動手試一試 »
注意： animation-duration 屬性定義了動畫完成所需的時間。如果未指定 animation-duration 屬性，則不會發生任何動畫，因為預設值為 0s（0 秒）。
在上面的示例中，我們使用關鍵字 "from" 和 "to"（分別代表 0%（開始）和 100%（完成））指定了樣式何時更改。
也可以使用百分比。透過使用百分比，您可以新增任意數量的樣式更改。
以下示例將在動畫完成 25%、50% 以及再次完成 100% 時更改 <div> 元素的背景顏色。
示例
/* 動畫程式碼 */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* 應用動畫的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
自己動手試一試 »
以下示例將在動畫完成 25%、50% 以及再次完成 100% 時更改 <div> 元素的背景顏色和位置。
示例
/* 動畫程式碼 */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* 應用動畫的元素 */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
自己動手試一試 »
延遲動畫
animation-delay 屬性指定動畫開始前的延遲。
以下示例在開始動畫前有 2 秒的延遲。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
自己動手試一試 »
也允許使用負值。如果使用負值，動畫將像已經播放了 N 秒一樣開始。
在以下示例中，動畫將像已經播放了 2 秒一樣開始。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
自己動手試一試 »
設定動畫應執行的次數
animation-iteration-count 屬性指定動畫應執行的次數。
以下示例將動畫執行 3 次後停止。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
自己動手試一試 »
以下示例使用值 "infinite" 使動畫永遠持續下去。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
自己動手試一試 »
反向或交替執行動畫
animation-direction 屬性指定動畫應向前、向後還是交替播放。
animation-direction 屬性可以具有以下值：
normal- 動畫正常播放（向前）。這是預設值。reverse- 動畫反向播放（向後）。alternate- 動畫先向前播放，然後向後播放。alternate-reverse- 動畫先向後播放，然後向前播放。
以下示例將反向（向後）執行動畫。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
自己動手試一試 »
以下示例使用值 "alternate" 使動畫先向前執行，然後向後執行。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
自己動手試一試 »
以下示例使用值 "alternate-reverse" 使動畫先向後執行，然後向前執行。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
自己動手試一試 »
指定動畫的速度曲線
animation-timing-function 屬性指定動畫的速度曲線。
animation-timing-function 屬性可以具有以下值：
ease- 指定一個動畫，開始慢，然後快，最後慢（這是預設值）。linear- 指定一個從頭到尾速度相同的動畫。ease-in- 指定一個慢速開始的動畫。ease-out- 指定一個慢速結束的動畫。ease-in-out- 指定一個慢速開始和結束的動畫。cubic-bezier(n,n,n,n)- 允許您在三次貝塞爾函式中定義自己的值。
以下示例顯示了一些可以使用的不同速度曲線。
示例
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
自己動手試一試 »
指定動畫的填充模式
CSS 動畫在第一個關鍵幀播放之前或最後一個關鍵幀播放之後不會影響元素。animation-fill-mode 屬性可以覆蓋此行為。
animation-fill-mode 屬性指定當動畫未播放時（開始前、結束後或兩者兼有）目標元素的樣式。
animation-fill-mode 屬性可以具有以下值：
none- 預設值。動畫在執行前後不會對元素應用任何樣式。forwards- 元素將保留由最後一個關鍵幀設定的樣式值（取決於 animation-direction 和 animation-iteration-count）。backwards- 元素將獲取由第一個關鍵幀設定的樣式值（取決於 animation-direction），並在 animation-delay 期間保留此樣式。both- 動畫將同時遵循 forwards 和 backwards 的規則，將動畫屬性在兩個方向上擴充套件。
以下示例讓 <div> 元素在動畫結束時保留最後一個關鍵幀的樣式值。
示例
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
自己動手試一試 »
以下示例讓 <div> 元素在動畫開始前（在 animation-delay 期間）獲取第一個關鍵幀設定的樣式值。
示例
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
自己動手試一試 »
以下示例讓 <div> 元素在動畫開始前獲取第一個關鍵幀設定的樣式值，並在動畫結束時保留最後一個關鍵幀的樣式值。
示例
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
自己動手試一試 »
動畫簡寫屬性
下面的示例使用了六個動畫屬性。
示例
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
自己動手試一試 »
使用簡寫 animation 屬性可以實現與上面相同的動畫效果。
CSS 動畫屬性
下表列出了 @keyframes 規則和所有 CSS 動畫屬性。
| 屬性 | 描述 |
|---|---|
| @keyframes | 指定動畫程式碼 |
| animation | 用於設定所有動畫屬性的簡寫屬性 |
| animation-delay | 指定動畫開始前的延遲 |
| animation-direction | 指定動畫應向前、向後還是交替播放 |
| animation-duration | 指定動畫完成一個週期所需的時間 |
| animation-fill-mode | 指定當動畫未播放時（開始前、結束後或兩者兼有）元素的樣式 |
| animation-iteration-count | 指定動畫應播放的次數 |
| animation-name | 指定 @keyframes 動畫的名稱 |
| animation-play-state | 指定動畫是正在執行還是已暫停 |
| animation-timing-function | 指定動畫的速度曲線 |
