用css製作動畫的3種方式

用CSS製作動畫的3種方式:transition、transform、animation

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

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

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

1.1 transition

1.1.1 使用時機

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

1.1.2 屬性

transition有4個屬性:

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

可以直接用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 transform

1.2.1 使用時機

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

1.2.2 樣式

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的傾斜角度

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

1.2.3 步驟

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

  • 我希望滑鼠移上方塊後會往右偏移100px、向下偏移100px,並且旋轉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 animation

1.3.1 使用時機

  • 可以使用在幾何形變和樣式改變
  • 和transition最大的差別在於,不需要搭配pseudo class(偽類)使用,也就是說當載入網頁後就會直接開始跑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使用),是的話使用transition或是transition搭配transform,如果希望載入頁面後直接開始動畫,就用animation

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

Step 3:如果希望動畫重複執行,那只能用animation

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top