用css製作動畫的3種方式

用 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

看完這篇文章是不是想換工作了呢(咦?那就千萬別錯過 2024 職涯博覽會!想換工作的,有機會在博覽會遇見更好的另一半,不想換工作的,有機會在博覽會遇見更好的工作!趕快點擊下面的 banner,拯救你的人生!!!https://s.yourator.co/jimmy

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top