網頁上看到許多 CSS Animation 套效想要參考使用,但卻不知道其中的屬性各自代表什麼意思嗎?本篇將介紹 CSS Animation 的各項屬性運用技巧,並提供一個模擬工具,讓大家可以快速的了解每個屬性的意義。
建立第一個動畫
在學習每一個屬性之前,首先先動手試試看讓一個元素套用動態的效果,在這之中我們需要先認識兩個語法 animation
及 @keyframe
:
@keyframes
: 影格,就像是戲中每個角色在 特定時間點需要呈現的狀態animation
: 動畫,決定實際演出時的播放方式,包含速率、正反轉都可以調整
步驟一:建立 @keyframe
CSS Animation 看起來主角應該是 animation
屬性,但實際決定元素是如何運作的是 @keyframes
,顧名思義是「影格」的意思,用來決定每個階段元素所套用的樣式。
而它的結構比較不一樣,看起來會比較像是 @media query
,會包含以下的語法:
- 使用
@keyframes
定義,後面包含其自訂名稱 - 使用
form...to
、%
等各種方式定義每個階段的影格變化 - 在
{ ... }
中定義元素在該影格所套用的樣式
撰寫結構如下:
/* 使用 `@keyframes` 定義,後面包含其自訂名稱 */
@keyframes rotate-keyframe {
/* 定義每個階段的影格變化 */
from {
/* 定義元素在該影格所套用的樣式 */
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
from...to
是只有頭尾的撰寫方式,如果要加入更多階段的影格樣式,可以使用 %
,寫法概念如下:
/* 使用 `@keyframes` 定義,後面包含其自訂名稱 */
@keyframes rotate-keyframe {
/* 定義每個階段的影格變化 */
0% {
/* 定義元素在該影格所套用的樣式 */
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
步驟二:套用 animation 並載入影格
實作中會建議先準備好 @keyframes
,才能確保 animation 是可以運作的,套用時請注意:
animation
需要對應一個@keyframes
的名稱- 至少要包含兩個屬性才能運作 -
animation-name
(@keyframes 名稱)、animation-duration
(動畫持續時間)
.box {
height: 100px;
width: 100px;
display: inline-block;
background-color: orange;
}
.rotate {
animation-name: rotate-keyframe; /* 套用的 keyframe */
animation-duration: 3s; /* 動畫持續時間 */
animation-iteration-count: infinite; /* 動畫播放次數 */
animation-timing-function: linear; /* 影片加速速率 */
}
@keyframes rotate-keyframe {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="box rotate"></div>
透過以上的程式碼,就可以做出以下的旋轉方塊效果。
認識每一個 animation 屬性
相信透過以上流程,就大致知道如何產生一個動畫效果,趁著有點熟悉的狀態下,持續學習完 Animation 的各項常用屬性吧。
animation-name:必要屬性
決定動畫所套用的 @keyframes
其值必定會是自訂的 keyframes 名稱,如果 CSS 中沒有 keyframes 將無法運作。
animation-duration:必要屬性
決定動畫演示一次的時間長短,撰寫時務必加入單位(s
秒、ms
毫秒…),寫法參考如下
animation-duration: 3s;
animation-duration: 240ms;
animation-iteration-count ⭐⭐⭐
動畫播放次數,可以填入數值(整數,或是包含小數點均可),或者可以使用 infinite
表示無限次重複播放。
animation-iteration-count: infinite;
animation-iteration-count: 1;
animation-iteration-count: 2.5;
animation-timing-function ⭐⭐⭐
動畫效果轉換的速率,如果善加運用可以讓元素動態更具有生命力,animation 的運用好壞將與此屬性有極大的關係。套用的值非常靈活,包含:
- 各種 Timing Function 例如:ease、ease-in、ease-in-out、linear…
- 使用階段的方式定義,如:
steps(8, end)
(套用八個階段完成影格 - 使用貝茲曲線定義動態轉換效果,如:
cubic-bezier(0.1, 0.7, 1.0, 0.1)
,會建議直接使用工具 產生貝茲數值。
寫法參考如下:
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: linear; /* 線性的速率 */
animation-timing-function: steps(5, end); /* 階段性的轉換 */
animation-timing-function: cubic-bezier(.4,.94,.56,1.59); /* 自訂義貝茲轉換速率 */
套用
cubic-bezier
甚至可以讓元素會有反彈的感覺
animation-direction ⭐⭐
動畫播放正向或是反向播放,也可以設定為單數次正向播放、雙數次為反向的運行狀態。
animation-direction: normal; /* 正向播放 */
animation-direction: reverse; /* 反向播放 */
animation-direction: alternate; /* 單數次為正向播放,雙數次為反向播放 */
animation-direction: alternate-revers; /* 與前者相反,雙數次為正向播放,單數次為反向播放 */
alternate 簡單來說就是一次正向、一次反向的播放方式
animation-play-state ⭐
決定當前的動畫是否暫停,包含 running
、paused
的屬性。
animation-play-state: running;
animation-play-state: paused;
animation-fill-mode ⭐
定義動畫在播放完成的停留呈現狀態。
animation-fill-mode: forwards; /* 停留在結束的狀態 */
animation-fill-mode: backwards; /* 停留在剛開始的狀態 */
animation-fill-mode: both; /* 依據開始或結束決定呈現的狀態 */
animation-delay ⭐
第一次播放動畫時所延遲的時間
animation-delay: 0;
animation-delay: 3s;
動手試試看 CSS Animation
看完本篇文章,相信對於 CSS Animation 有基本的認識,接下來就直接動手玩玩看,了解 CSS Animation 的魅力吧
運作時所套用的 CSS 程式碼
.animation {
{{ key }}: {{ item }};}
@keyframes rotate-keyframe {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes move-object {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200%);
}
}
延伸閱讀
如果要在實戰中套用 Animation 的效果,非常推薦直接使用 「Animate.css」,包含相當多種動態轉場效果,就算是一般的網站宣傳頁面,都可以輕易地將動態套用至元素上喔
延伸資源:
- Animate.css:https://animate.style/