用 CSS 製作動畫的 3 種方式： CSS transition, CSS transform, CSS animation

今天要來筆記一下該如何用 CSS 製作動畫，爬了一些文發現這篇：CSS3 中的動畫介紹算是介紹比較完整的，再把製作動畫的方式步驟化方便自己之後需要應用。

不過今天的筆記就先排除效能，改天有空再來寫一篇關於動畫與瀏覽器效能之間的關係。

Table of Contents

1. CSS 製作動畫的三種方式：

1.1 CSS transition

1.1.1 使用時機

主要用在改變目標元素的樣式時，像是背景顏色、變亮變暗等等。
也可以直接更改幾何樣式 ( width、height ) 來做動畫，但由於瀏覽器渲染的關係，直接用 CSS transition 做幾何形變的動畫時，效能比較差。
使用 CSS transition 時需要搭配 pseudo class (偽類)使用，也就是說必須使用滑鼠搭配與網頁之間的互動 ( hover、active 等等)，才會觸發這類的動畫。

1.1.2 屬性

CSS transition 有4個屬性：

transition-property: 轉場動畫改變的樣式
transition-duration: 轉場動畫的持續時間
transition-timing-function: 轉場動畫的時間函式
transition-delay: 轉場動畫的延遲時間

可以直接用 CSS transition 指定上述 4 個指令，ex: transition: box-shadow 1s linear 1s，如果一個元素有超過 1 個屬性需要做轉場動畫，那就用逗號隔開。

1.1.3 步驟

Step 1：寫好目標元素的 CSS 樣式以及觸發動畫後的結束樣式

ex:

我希望滑鼠移上方塊後會有陰影，並且讓它變亮，因此我必須將移上滑鼠後的樣式寫在 hover 裡面
我希望滑鼠點擊方塊後背景顏色變為紅色，且透明度變成原來的 0.8，因此我必須將點擊滑鼠後的樣式寫在 active 裡面

    .target_object{
        width: 100px;
        height: 100px;
        border: 1px solid;
        background-color: gray;
    }
    .target_object:hover{
        box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.5);
        filter: brightness(1.5);
    }
    .target_object:active{
        opacity: 0.8;
        background-color: red;
    }

Step 2：在目標元素的樣式中加入 transition 屬性，CSS 就會產生轉場動畫了：

    .target_object{
        width: 100px;
        height: 100px;
        border: 1px solid;
        background-color: gray;
        transition: box-shadow 1s, background-color 1s,filter 1s;
    }

1.2 CSS transform

1.2.1 使用時機

顧名思義，就是變形的意思，因此通常是使用在希望目標元素有幾何形變相關的動畫，像是：位移、旋轉、傾斜、縮放等等。
和 CSS transition 一樣，需要搭配 pseudo class (偽類)使用，而且通常也會和 CSS transition 一起搭配使用，才會有轉場動畫的效果。
可以做到 3D 的動畫效果。

1.2.2 樣式

CSS transform 樣式中比較常用的有 4 種，其他的樣式請參考 W3Schools。

translate(x, y)：位移，後面放 x 位移量與 y 位移量 ( x > 0 向右位移，y > 0 向下位移 )
scale(x, y)：縮放，後面放 x、y 縮放倍率，如果只放一個數字就是x、y縮放倍率相同
rotate(deg)：旋轉，後面放旋轉角度
skew(x, y)：傾斜，後面放 x、y 的傾斜角度

和 CSS translate 不一樣的是，如果有多個 transform 樣式，要用「空格」隔開，而不是逗號。

1.2.3 步驟

Step 1：寫好目標元素的 CSS 樣式以及觸發動畫後的結束樣式

我希望滑鼠移上方塊後會往右偏移 100 px、向下偏移 100 px，並且旋轉 90 度，因此我必須將移上滑鼠後的樣式寫在 hover 裡面

    .target_object{
        width: 100px;
        height: 100px;
        border: 1px solid;
        background-color: gray;
    }
    .target_object:hover{
        transform: translate(100px, 100px) rotate(90deg);
    }

Step 2：在目標元素的樣式中加入 transition 屬性，CSS 就會產生轉場動畫了，transition-property 為 transform：

    .target_object{
        width: 100px;
        height: 100px;
        border: 1px solid;
        background-color: gray;
        transition: transform 1s;
    }

1.3 CSS animation

1.3.1 使用時機

可以使用在幾何形變和樣式改變
和 CSS transition 最大的差別在於，不需要搭配 pseudo class (偽類)使用，也就是說當載入網頁後就會直接開始跑 CSS animation
可以設定動畫重複次數

1.3.2 樣式

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count：動畫重複次數
- infinite：無限次重複動畫
animation-direction：動畫執行方向
- normal：順向
- reverse：反向
- alternate：先順向再反向
- alternate-reverse：先反向再順向
animation-timing-function
animation-fill-mode：決定目標樣式在動畫開始及結束時的樣式
- none：預設，在動畫開始前或結束後並不會套用任何動畫的樣式
- forwards：當動畫結束時，目標元素會停留在最後設定的動畫樣式
- backwards：當動畫開始前(包含 delay 期間)，目標元素會停留在最開始設定的動畫樣式
- both：結合 forwards 和 backwards 的特性

1.3.3 步驟

Step 1：先將 animation 的樣式寫入目標元素的 CSS 中

    .target_object{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-direction: normal;  
    }

Step 2：用 @keyframes 來設定動畫執行的過程中每個時間點目標元素的樣式

    @keyframes example {
        0%   {background-color:red; left:0px; top:0px;}
        50%  {background-color:blue; left:200px; top:0px;}
        100% {background-color:red; left:0px; top:0px;}
      }

2. 總結

簡單來說，當你決定用 CSS 製作動畫時，先決定要用哪個樣式來做：

Step 1：是否為轉場動畫 (是否需搭配 pseudo class 使用)，是的話使用 CSS transition 或是 CSS transition 搭配 CSS transform，如果希望載入頁面後直接開始動畫，就用 CSS animation

Step 2：若為轉場動畫，如果只牽涉到幾何形變，則用 CSS transform；如果沒有牽涉到幾何形變，而是牽涉到其他樣式的變化，則單純用 CSS transition

Step 3：如果希望動畫重複執行，那只能用 CSS animation

如果覺得我的文章有幫助的話，歡迎幫我的粉專按讚哦~謝謝你！