CSS動畫animation

CSS動畫相關屬性

此需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。

CSS animations 有三種好處：

對於不複雜的動畫來說，CSS animation 是好選擇。你甚至不必懂得 JavaScript。
在資源消耗上，CSS animation 有優勢，即使在系統負載超過 50% 仍可有效運作。在 JavaScript 上要達到一樣的目的有賴於你寫出品質非常好的 code。事實上，CSS animation 在運作上可以適時的減少 frame 量或以其它技術減少資源消耗。
CSS animation 讓瀏覽器來負責動畫的產生過程，如此可以擁有較好的優化。
取自-CSS animation 設定

CSS 動畫屬性總覽 ( CSS Animation Properties )

@keyframes關鍵影格規則

當您在@keyframes 規則中指定 CSS 樣式時，動畫會在特定時間逐漸從當前樣式更改為新樣式。

要使動畫工作，您必須將動畫綁定到一個元素。

下面的示例將“example”動畫綁定到 <div> 元素。動畫將持續 4 秒，它會逐漸將 <div> 元素的背景顏色從“紅色”更改為“黃色”：

/* The animation code */
/* @keyframes 動畫名ex.example */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

在上面的示例中，我們使用關鍵字“from”和“to”（代表 0%（開始）和 100%（完成））指定了樣式何時更改。

也可以使用百分比。通過使用百分比，您可以添加任意數量的樣式更改。

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

以下示例將在動畫完成 25%、50% 和動畫完成 100% 時更改 <div> 元素的背景顏色和位置：

/* The animation code */
@keyframes example {
  0%   {
  background-color:red; 
  left:0px; 
  top:0px;
  }
  25%  {
  background-color:yellow; 
  left:200px; 
  top:0px;
  }
  50%  {
  background-color:blue; 
  left:200px; 
  top:200px;
  }
  75%  {
  background-color:green; 
  left:0px; 
  top:200px;
  }
  100% {
  background-color:red; 
  left:0px; 
  top:0px;
  }
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

資料取自-CSS動畫 w3schools

animation-name 動畫名稱

animation-name 表示動畫名稱，命名原則如下：

名稱可以加引號、亦可不加引號

1 2	@keyframes oxxo { ... } @keyframes "oxxo" { ... }

如果同名，以後面的名稱為主
名稱大小寫有區別

特殊字元不能使用，但是用引號框起來就可以

@keyframes initial { ... }   /* 不可使用 */
@keyframes None { ... }      /* 不可使用 */
@keyframes "initial" { ... } /* 可以用 */
@keyframes "None" { ... }    /* 可以用 */

animation-duration 動畫持續時間

animation-duration 指的是「播放一次」動畫需要的時間，單位為秒 ( s ) 或毫秒 ( ms )，預設值 0s，如果沒有設定或將其設為 0s，就不會播放動畫，基本上和 animation-name 動畫名稱都是屬於一定要有的屬性。

animation-delay 動畫延遲播放時間

animation-delay 代表的是動畫要延後多久才開始播放，單位為秒 ( s ) 或毫秒 ( ms )，預設值 0s，如果沒有設定或將其設為 0s，動畫就會直接播放不會延遲，但比較特別的是，如果將延遲播放時間設定為「負值」，例如 -1s、-2s，得到的結果就「不會延遲，而是快轉(跳轉)」，假設一段動畫要 5 秒，animation-delay 設定為 -2s，那麼動畫將會直接從第二秒的位置開始播放，播放三秒後停止 ( 類似 5-2=3 的概念 )。

animation-iteration-count 動畫播放次數

animation-iteration-count 表示動畫播放的次數，預設值為 1 次，如果設定為 infinite 動畫就會無止盡的播放下去。

animation-direction 動畫播放方向

normal：正常播放，從 0% 到 100% ( 預設值 )。
reverse：反轉播放，從 100% 到 0%。
alternate：正反轉輪流播放，奇數次為 0% 到 100%，偶數次為 100% 到 0%，若動畫播放次數只有一次就只會正常播放。
alternate-reverse：alternate 的相反，奇數次為 100% 到 0%，偶數次為 0% 到 100%，若動畫播放次數只有一次就只會反轉播放。

animation-timing-function 動畫加速度函式
在 CSS 動畫裏，animation-timing-function 用來定義動畫的速度曲線。速度曲線決定了動畫從一套 CSS 樣式變爲另一套所用的時間。如果要描述的動畫是一輛車在指定時間內（animation-duration）從 A 運動到 B，那麼 animation-timing-function 表述的就是車在運動中的加速和減速等過程。
linear 線性，沒有任何加速減速
ease、ease-in、ease-out、ease-in-out 具有加速減速的動畫，透過 ease 的加減速表現，能讓動畫更為流暢，比較不會像 linear 一樣古板
step-start、step-end step 系列算是比較少用的設定，顧名思義它就是「一步一步」，如果設定 step-start，則會按照關鍵影格的順序一格格進行，不會有中間的演算動畫，而 step-start 和 step-end 的差異在於 step-start 會把第一格關鍵影格的 output progression ( y 軸 ) 數值直接拉到 1，從 (1, 0) 開始，接著到 (1, 1) 結束，所以「看不到第一格」，然而 step-end 則是從 (0, 0) 開始一直到 (0, 1) 的最後一格才突然變成 (1, 1)，所以也導致「看不到最後一格」。

animation-fill-mode 動畫播放前後模式
none：預設值，不論動畫播放次數，結束後一律返回原始狀態。
forwards：動畫結束後，保持在最後一個影格狀態。
backwards：動畫結束後，保持在第一個影格狀態 ( 但實際測試和 none 效果一樣 )。
both：依據動畫的次數或播放方向，保持在第一個影格或最後一個影格狀態，相當實用。

animation-play-state 動畫播放或暫停狀態
可搭配滑鼠 hover 的效果
running：預設值，表示動畫運行。
paused：表示動畫暫停。

資料取自及更進階參考:
完整解析 CSS 動畫 ( CSS Animation )

其他資料參考:
初探 css animation - 來勢洶洶的動畫屬性(上)
初探 css animation - 來勢洶洶的動畫屬性(下)

CSS動畫animation

CSS 動畫屬性總覽 ( CSS Animation Properties )

@keyframes關鍵影格 規則

animation-name 動畫名稱

animation-duration 動畫持續時間

animation-delay 動畫延遲播放時間

animation-iteration-count 動畫播放次數

animation-direction 動畫播放方向

animation-timing-function 動畫加速度函式

animation-fill-mode 動畫播放前後模式

animation-play-state 動畫播放或暫停狀態

@keyframes關鍵影格規則