第九章、☞ 轟隆隆隆衝衝衝 Animation 引擎發動 ━☆ﾟ.*･｡ (反)

第 12 屆 iThome 鐵人賽

DAY 10

Modern Web

網頁阿尼尛，到底是在幹尛？系列第 10 篇

12th鐵人賽好想工作室

CathyShen

團隊好想工作室 v4.0

2020-09-25 13:11:21

2286 瀏覽

分享至

前言

在昨天的文章中我們詳細了介紹何謂 CSS Animation，而今天我們就來了解 Animation 內有哪些屬性可以運用吧！

Animation 基礎語法

@keyframe

關鍵幀(keyframes) 是用來指定動畫運作期間個時間點的動畫屬性值。
@keyframes 使用方法如下：

@keyframes <keyfeames-name>{<rule-list>}

keyframes-name: 使用者自定義動畫名稱，普通文字與字串符會被默認同一規則名稱，但大寫與小寫則會視為不同規則名稱，另外使用者無法使用 none 或 initial 這個關鍵字。
以下為 keyframe-name 範例：

/* 普通文字或字串符皆被視為同一規則名稱 */
@keyframes foo { ... }
@keyframes "foo" { ... }

/* 大寫與小寫為不同規則名稱 */
@keyframes foo { ... }
@keyframes FOO { ... }

/* 使用者無法直接使用 inital 或 none 兩個關鍵字 */
@keyframes initial { ... }
@keyframes None { ... }

/* 但若是使用字串符的 "inital" 或 "none" 則可以運行 */
@keyframes "initial" { ... }
@keyframes "None" { ... }

keyframes-block: rule-list 內允許 keyframes-block 所定義的規則，在 keyframe-block 中你可以放入任何 CSS 除了有關於 Aniamtion 的屬性。
but!，人生最重要的這個 but，此規則可以使用 animation-time-funciton 屬性並給予其特殊定義。不過由於其內的 CSS 屬性不參與 CSS cascade 所以即便在 keyframes-block 內的屬性上使用 !important 也不會有任何作用。
keyframes-selector: 指定關鍵幀的動畫持續時間，可由百分比 100% 0% 或關鍵字 from to，所組成。
關鍵字 from 等於百分比 0%，即起始值、關鍵字 to 等於百分比 100%，即結束值。小於 0% 或大於 100% 都會被視為無效數值。

注意！
百分比單位必須有 % 單位符號，若直接使用 0，是無效的。

若使用者未指定起始值，則起始值會自動從 0% 開始計算，同理，若使用者沒有指定結束值，結束值將會自動設定 100% 。

animation-name

如前面所敘述。
另外要提到的是，若有重複的 Animation 屬性在不同的 animation-name ，則會由後向前覆蓋。

none
特殊關鍵字，可用於停用動畫而不需要透過改變 CSS 選擇器，或是停用 cascade 中的動畫。
keyframes-name
標示動畫規則的名稱。

.box {
  animation-name: slide-right;
}

@keyframes slide-right {
    <rule-list>
}

animation-duration

定義單個動畫週期的持續時間。

若時間值為 0 ，則對於動畫 keyframes 將會無效，但動畫本身仍會作用，但只會發生在一瞬間。更具體的來說，時間值 0 確實是有觸發整個動畫的開始與結束，只是使用者肉眼無法所見。

而負數的值對於 time 則會無效。

animation-timing-function

設定動畫在關鍵幀中加速度的函式，此定義了每一個動畫週期的節奏感，可做出握們在前面動畫12法則中 漸快與漸慢（Slow in and slow out） 效果，可以為一個或多個值。

linear
無任何加速度變化。

linear
ease、ease-in、ease-out、ease-in-out
加速度或減速度。

ease
step
按照關鍵幀數，一步一步 的動作。

step-start

有關於 timing-function 的定義，會在後面篇章有更詳細的介紹，敬請大家期待。

animation-iteration-count

定義動畫播放次數，初始值為 1，表示動畫會從頭到尾播放一次，通常此屬性會與 animation-direction 和 alternate 屬性一起使用。讓動畫能夠順暢的在交替循環反向播放。

infinite
無限次循環播放
< number >
使用者自訂播放次數，若該數值不是整數，則動畫會在最後一個循環中途結束。若數值為負數雜無效。
數值 0 是有效的，效果類似animation-duration 的數值 0。

播放次數：２

animation-direction

定義動畫播放方向是由正向或反向起始播放。反向播放時 timing functions 也會相反。舉例來說：正向播放時為 ease-in，設定反向播放的話則為 ease-out。

normal
按照指定方向正向播放方向。

正向播放
reverse
按照動畫方向反向播放。
alternate
奇數次數以指定方向正向播放並且循環，偶數次數以反向播放並且循環。
alternate-reverse
奇數次數以反向播放並且循環，偶數次數以沿著正常方向正向播放並且循環。

animation-play-state

並億動畫是否正常播放或停止運行。

running
動畫正常運行。
paused
動畫暫停運行。雖然畫面上為靜止狀態，但 keyframes 仍然作用於元素中。當取消 paused (及重新 running) 動畫將會從被中斷處開始運行。

animation-delay

定義動畫起始時間，即動畫應用到元素上到動畫開始時的時間長度。
0s 為預設值。代表動畫應用到元素後立即執行動作。

若時間長度設定負數，則他會從動畫中間開始進行播放，此時效果看起來像是畫面還沒選染完成便已經開始運作動畫了。

animation-fill-mode

定義當動畫不播放時(在開始前，結束後以及兩者)的元素狀態。此屬性無論是在動畫播放前或後，都不會引響到元素原始 CSS。

none
預設值，動畫在播放完畢後必定回到最初狀態。
forwards
動畫結束後保持在最後一個關鍵幀的屬性值。
當 animation-iteration-count >0 時，其應用的值為動畫最後一次所使用的屬性，當 animation-iteration-count =0 時，其應用的值為第一次開始的屬性。
backwards
動畫結束後動畫結束後保持在第一個關鍵幀的屬性值(取決於 animation-delay)
效果和 none 差不多。
both
動畫將遵循 forwards 與 backwards 規則。