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

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

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

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

Jimmy 的架站筆記