動畫是突顯互動元素的絕佳方式,還能為您的設計增添興趣和樂趣。在本單元中,您將瞭解如何透過 CSS 新增及控制動畫效果。
有時候,您會在介面中看到小輔助程式,因為當您點選這些輔助程式時,它會提供有關目前所在部分的實用資訊。這些通知通常會有閃爍的動畫,目的是讓您知道資訊存在且應與之互動。本單元將說明如何使用 CSS 建立這些輔助程式和其他動畫。
您可以使用 CSS 設定含有主要畫面格的動畫序列。這些序列可以是基本的單狀態動畫,也可以是複雜的、時間型序列。
什麼是主要畫面格?
在大部分的動畫工具中,主要畫面格是用來將動畫狀態指派給時間軸時間戳記的機制。
舉例來說,以下是閃爍「helper」點的時間軸。動畫執行 1 秒,且有 2 個狀態。
這些動畫各都有一個特定時間點的開始和結束位置。請使用主要畫面格,將這些內容對應至時間軸。
@keyframes
CSS @keyframes
採用與動畫主要畫面格相同的概念。
以下舉例說明兩個狀態:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
第一個重要部分是自訂 ID (custom-ident
),也就是主要畫面格規則的名稱。本範例的 ID 為 my-animation
。自訂 ID 的運作方式與函式名稱類似,可讓您在 CSS 程式碼的其他位置參照主要畫面格規則。
在主要畫面格規則中,from
和 to
是代表 0%
和 100%
的關鍵字,也就是動畫的開頭和結尾。您可以重新建立相同的規則,如下所示:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
在時間範圍內,您可以視需要加入多個位置,數量不限。 在閃爍輔助程式範例中,有兩個狀態會轉譯為兩個主要畫面格。這表示主要畫面格規則中有兩個位置,分別代表每個主要畫面格的變更。
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation
屬性
如要在 CSS 規則中使用 @keyframes
,您可以個別定義各種動畫屬性,或使用 animation
簡短屬性。
animation-duration
.my-element {
animation-duration: 10s;
}
animation-duration 屬性會定義 @keyframes
時間軸應以時間值的時間長度。預設值為 0 秒,表示動畫仍會執行,但畫面會太快。時間值不能是負值。
animation-timing-function
如要重現動畫中的自然動態,您可以使用時間函式計算動畫每個點的播放速度。計算結果值通常會是「曲線」,導致動畫在 animation-duration
過程中以不同速度執行,而且如果瀏覽器計算的值超出 @keyframes
中定義的值,元素就看起來會跳出。
在 CSS 中,有幾個關鍵字可做為 animation-timing-function 的值:linear
、ease
、ease-in
、ease-out
、ease-in-out
。
.my-element {
animation-timing-function: ease-in-out;
}
加/減速函式值會以曲線顯示,因為加/減速是利用貝茲曲線 (一種用於模擬速率的函式) 計算而得。每個計時函式關鍵字 (例如 ease
) 都會參照預先定義的 Bézier 曲線。在 CSS 中,您可以使用 cubic-bezier()
函式直接定義 Bézier 曲線,且該函式可接受四個數值:x1
、y1
、x2
、y2
。
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
這些值會沿著 X 軸和 Y 軸繪製曲線的各個部分。
瞭解貝茲曲線並不容易。視覺工具 (例如 Lea Verou 的這個產生器) 非常實用。
steps
加/減速函式
有時候,您可能需要以間隔為單位 (而不是沿著曲線) 移動,對動畫進行更精細的控制。steps()
加/減速函式可讓您將時間軸細分為「相等的時間長度」的已定義間隔。
.my-element {
animation-timing-function: steps(10, end);
}
第一個引數是數字步數。如果步驟與步驟數量相同,每個主要畫面格都會依照步驟的確切時間長度依序播放,而且不會轉換狀態。如果主要畫面格少於步驟數,瀏覽器會根據第二個引數,在主要畫面格之間新增步驟。
第二個引數是方向。如果設為 end
(預設值),則步驟會在時間軸結束時完成。如果設為 start
,動畫的第一步驟會在動畫開始時立刻完成,代表的結束時間比 end
更早一個步驟。
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count 屬性會定義 @keyframes
時間軸在動畫期間應執行的次數。根據預設,值為 1,表示動畫在時間軸結束時就會停止。此值不能為負數。
如要讓動畫循環播放,請將疊代計數設為 infinite
。這就是本課程一開始的閃爍動畫運作方式。
animation-direction
.my-element {
animation-direction: reverse;
}
您可以利用動畫方向,設定時間軸在主要畫面格上的執行方向。這個方向會採用下列值:
normal
:預設值,也就是向前顯示的值。reverse
:向後延伸至時間軸。alternate
:針對每個動畫疊代,時間軸會交替執行,並向後執行。alternate-reverse
:類似alternate
,但動畫會從反向執行時間軸開始。
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay 屬性所定義的是瀏覽器啟動動畫前的等待時間長度。和 animation-duration
屬性一樣,這個值需要時間值。
有別於 animation-duration
,您「可以」將 animation-delay
定義為負值,讓動畫從時間軸中對應的時間點開始。舉例來說,如果動畫長度為 10 秒,而您將 animation-delay
設為 -5s
,動畫就會從時間軸的一半開始。
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
animation-play-state 屬性可用於播放及暫停動畫。預設值為 running
。如果設為 paused
,動畫就會暫停。
animation-fill-mode
animation-fill-mode 屬性:定義 @keyframes
時間軸中哪些值會在動畫開始前或結束後保留。預設值為 none
,表示動畫完成時,系統會捨棄時間軸中的值。您也可以採取以下做法:
forwards
:最後一個主要畫面格會根據動畫方向持續顯示。backwards
:第一個主要畫面格會根據動畫方向持續顯示。both
:第一個和最後一個主要畫面格都會保留下來。
animation
簡寫
您不必分別定義每個屬性,只要使用 animation
簡寫即可定義動畫屬性,按照以下順序定義動畫屬性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
使用動畫的注意事項
使用者可以在與應用程式和網站互動時,將作業系統設為偏好動作較慢。如要偵測此偏好設定,請使用 prefers-reduced-motion 媒體查詢:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
這不一定是沒有動畫的偏好設定。此配置適合較少的動畫,特別是較不預期的動畫。如要進一步瞭解這項偏好設定和整體效能,請參閱動畫指南。
隨堂測驗
測驗您對動畫的相關知識
@keyframes
動畫的名稱或自訂 ID 是否區分大小寫?
SWOOP
和 swoop
同時存在。關鍵字 from
和 to
與:
start
,end
。0%
,100%
。from
與 0%
和 to
相同。0
和1
animation-timing-function
也稱為:
@keyframes
動畫中的主要畫面格數量下限為何?