Day 01 - CSS 動畫基礎
在後面幾天來介紹那些有時會在其他網站常見的酷炫特效 (ex. 浮動粒子、按鈕彈跳效果...等) 之前,需要先花個幾天談一下 CSS 動畫的基礎,這樣才能更好適應後面部份的內容。
animation
與 @keyframes
基本上,一個 CSS 的動畫由兩個部分所組成:animation
屬性和 @keyframes
規則。
我們可以先來看一小段程式碼:
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
.element {
animation: move 2s infinite alternate;
}
產生的結果會如下面嵌入的範例這樣,一顆籃球球不斷左右來回移動:
解析 animation
我們先來解析上面的 animation: move 2s infinite alternate;
到底做了什麼事。:
- 首先在我們範例中,第一個屬性 move 是透過
@keyframes
建立的關鍵影格,這點後面再說。 - 接下來的
2s
代表 animation-duration,簡單來說就是一個動畫的持續時間。 infinite
代表 animation-iteration-count,定義動畫重複的次數,在這裡就表示動畫不限次數一直執行。alternate
代表 animation-direction,是用來定義動畫執行一次後是否反方向執行。 所以上面這段 CSS 動畫就是讓 move 這個關鍵影格以每次 2 秒的時間執行動畫,執行完後反方向再來一次,然後無限重複。
所以在這個範例中我們用到了關鍵影格、animation-duration、animation-iteration-count 以及 animation-direction,但其實 animation
遠不只這些屬性。
其它 animation
屬性還有:
- animation-delay:動畫要延遲多久時間才開始執行。
- animation-play-state:動畫的執行狀態,可以是
running
或paused
,簡而言之就是要動畫執行還是先暫停。 - animation-timing-function:動畫的時間函數,可以在細分成數個項目,預設情況下是套用
ease
。ease
:緩慢開始,然後加速,然後緩慢結束。linear
:動畫從頭到尾都是以相同的速度執行。ease-in
:緩慢開始,然後加 速。ease-out
:加速,然後緩慢結束。ease-in-out
:緩慢開始,中間加速,然後緩慢結束。
- animation-fill-mode:動畫結束後的狀態,可以是
none
、forwards
、backwards
或both
,預設狀態下會是none
。none
:動畫結束後,元素會回到原本的狀態。forwards
:動畫結束後,元素會保持在動畫的最後一個影格。backwards
:動畫開始前,元素會先套用第一個影格的樣式。both
:結合forwards
和backwards
的效果。
有些人會有疑問,animation-fill-mode 的 none
跟 backwards
測試起來好像沒有差別,在最後一幀的時候位置都是一樣的啊!
但請注意我們範例中的元素背景色,none
在動畫延遲的時間內 (注意範例中我設定動畫啟動延遲 5 秒),背景色會是預設的黃色,而 backwards
則會是第一幀的粉藍色,所以關於 none
跟 backwards
的差異其實主要體現在設定 animation-delay 後的表現。
解析 @keyframes
前述有講到在 animation
引入了一個 move 這個關鍵影格,這個關鍵影格是透過 @keyframes
來定義的。
什麼是關鍵影格?
讓我們再看看最一開始那段 code:
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
.element {
animation: move 2s infinite alternate;
}
我們用 @keyframes
定義了一個名為 move 的關鍵影格,在這個關鍵影格中,move 把 2 秒的 animation-duration 給拆成了兩個關鍵影格點,分別是 from
包起來的區塊以及 to
包起來的區塊。
from
代表動畫的開始狀態,而 to
代表動畫的結束狀態,講白話一點,這裡 move 做的事就是讓元素在 2 秒內從 left: 0;
移動到 left: 200px;
,這就是一個最基本的關鍵影格,與 animation
一同構成一個最基本的動畫。
除了 from
和 to
之外,我們還可以使用百分比來定義關鍵影格,實際上 from
和 to
就是 0%
和 100%
的簡寫。
至於百分比是誰的百分比呢?
其實這個百分比就是 animation-duration 的百分比。
以上述 2 秒的例子來看, 0%
就是 0s
,100%
就是 2s
,以此類推 50%
就是 1s
。
我們來為上述例子添加一個在 50%
變成粉紅色的關鍵影格:
@keyframes move {
from {
left: 0;
}
50% {
background-color: pink;
}
to {
left: 200px;
}
}
現在我們的藍色球球會在 1 秒的時候變成粉紅色啦,這就是使用百分比來定義關鍵影格的效果。