CSS Podcast - 022: Animation
有時您會在介面上看到小幫手,點選後即可取得該部分的實用資訊。這些資訊通常會搭配脈動動畫,讓您知道資訊已顯示,並且應與之互動。本單元將說明如何使用 CSS 建立這些輔助程式和其他動畫。
您可以使用 CSS 設定含有主要畫面格的動畫序列。這些序列可以是基本單狀態動畫,或是複雜的時間序列。
什麼是主要畫面格?
在大多數動畫工具中,主要畫面格是用來將動畫狀態指派至時間軸上時間戳記的機制。
舉例來說,以下是脈動「輔助」點的時序。動畫會執行 1 秒,並且有 2 個狀態。
每個動畫狀態都有特定的開始和結束點。您可以使用主要畫面格,在時間軸上對應這些項目。
@keyframes
CSS @keyframes
的概念與動畫主要影格相同。
以下是包含兩個狀態的範例:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
第一個重要的部分是 自訂 ID (custom-ident
),也就是 keyframes 規則的名稱。本範例中的 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
) 都會參照預先定義的貝茲曲線。在 CSS 中,您可以直接使用 cubic-bezier()
函式定義貝茲曲線,該函式可接受四個數值: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;
}
您可以使用 animation-direction 設定時間軸在主要影格間執行的方向,可用的值如下:
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是否有大小寫之分?
關鍵字 from
和 to
與以下關鍵字相同:
start
,end
。0%
,100%
。0
和1
animation-timing-function
也常被稱為:
@keyframes
動畫中的主要畫面格數量下限為何?