動畫是凸顯互動式元素並增添興趣的好方法 以及增添設計趣味性和趣味在本單元中,您可以瞭解如何新增及控制 CSS 動畫效果
有時候介面上會顯示一些實用的輔助工具 查看相關資訊這類通常 閃爍的動畫,巧妙地告知資訊已經存在 應進行互動 本單元將說明如何使用 例如 CSS、CSS、CSS 和 JS。
您可以使用 CSS 搭配主要畫面格設定動畫序列。這些序列 可以是基本的一狀態動畫,也可以是複雜時間的序列。
什麼是主要畫面格?
在大多數的動畫工具中,您可以使用主要畫面格來指派動畫 將狀態更新為時間戳記
比方說,提供脈衝「輔助」的時間軸點。動畫播放時 有 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
) 參照預先定義的貝茲曲線。在 CSS 中
您可以直接使用 cubic-bezier()
函式定義貝茲曲線。
可接受四個數字值:x1
、y1
、x2
、y2
。
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
這些值會透過 X 軸和 Y 軸繪製曲線的每個部分。
steps
加/減速函式
有時候,您可能會想以更精細的方式控制動畫
而不是沿著曲線移動steps()
加/減速功能可讓您
可將時間軸拆分為「相同時間長度」定義的間隔時間。
.my-element {
animation-timing-function: steps(10, end);
}
第一個引數是數字的步數。如果沒有任何獨立的 Pod 數量 主要畫面格視為步驟,每個主要畫面格都會依照 其步,而且狀態之間不會轉換 如果主要畫面格少於步數,瀏覽器會在 視第二個引數而定。
第二個引數為方向。如果設為 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-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
與:
0%
,100%
。0
和1
start
,end
。animation-timing-function
通常也稱為:
@keyframes
動畫中的主要畫面格數量下限為何?