Jimmy 的架站筆記

嗨~我是 Jimmy!我可能不是你認識的第 1 個 Jimmy,但一定是最帥的那個。


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

By Jimmy 2020-07-02
發表於 css front-end-note
用 CSS 製作動畫的 3 種方式: CSS transition, CSS transform, CSS animation

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

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

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

1.1 CSS transition

1.1.1 使用時機

1.1.2 屬性

CSS transition 有4個屬性:

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

1.1.3 步驟

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

ex:

    .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 使用時機

1.2.2 樣式

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

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

1.2.3 步驟

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

    .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 使用時機

1.3.2 樣式

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


你可能也會喜歡

【JavaScript基礎】:Array Methods — 陣列方法整理

【JavaScript基礎】:Array Methods — 陣列方法整理

陣列(array)屬於物件(object)的一種,在Javacript中有許多陣列方法(array methods)可做轉換或運算,來整理一下在看到陣列常見和相關的方法。 1. Array and String:陣列與字串的轉換 字串與陣列相關的方法 1.1 字串轉換成陣列 1.1.1 **Array.from()** 這個方法不只可以轉換字串,還可以轉換類陣列等等。 語法: > Array.f

Read More
前端專案的SOP — git、webpack 教學

前端專案的SOP — git、webpack 教學

稍微整理一下網路上查到的webpack 教學文章,在學習完前端的基礎之後,也學到了不找製作專案時會使用到的工具,諸如git、webpack等等,所以想整理一下開發一個專案時,使用這些工具的SOP。 首先第一步,先將專案加入到git 版本控管之中,方便自己隨時回到某個版本,或是與他人多人協作。

Read More