iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
2
Modern Web

For 前端小幼苗的圖解筆記系列 第 24

[CSS] Animation 動畫

基本的 樣式設定 / 排版定位 都已經難不倒你了嗎?那就接著要來玩玩動態的部分啦!一開始覺得寫 CSS 能讓醜醜的網頁變漂亮很療癒,而接觸了 CSS 的動畫控制,更是感到加倍療癒啊!
本篇一樣從基本的語法開始:


Animation 2 步驟 起手式

step1. 定義動畫: @keyframes

@keyframes 動畫名稱{
    from{
        opacity:0.5;
    }
    to{
        opacity:1;;
    }
}
  • 給這個動畫一個名稱 @keyframes 動畫名
  • 裡面的每一段為「關鍵影格」。
  • 除了 fromto,還能用百分比來定義
    @keyframes 動畫名稱{
        0%{
            ...
        }
        50%{
            ...
        }
        100%{
            ...
        }
    }
    
    小細節:
    • 百分比的意思是,在整個動畫時間長度內的百分之幾的位置設下關鍵影格,所以不會有120%這種數字出現欸!
    • 通常會定義清楚0%、100%,如果沒有定義頭跟尾,會被程式自動腦補,有可能跟你預期的不同!故通常起訖會定義。
    • 如果重複指定相同的關鍵影格會怎樣?
      50%{
          ...
      }
      50%{
          ...
      }
      
      • 相同屬性時:後面會覆蓋前面
      • 屬性不相同時,都能正常生效。
    • 如果我定義了兩段相同動畫名稱的動畫,會怎樣?
      • 同css權重後面蓋前面的概念,前面的會被後面的動畫給蓋掉

Step2. 將指定的元素掛上動畫:

selector{
    animation-name: 動畫名稱;
    animation-duration:2s;
}
  • Codepen 栗子

    @keyframes move{
        from{
            opacity:0;
            left: 0;
            background: orange;
        }
        to{
            opacity:1;
            left: 100px;
            background: blue;
        }
    }
    
    .box{
        animation-name: move;
        animation-duration:2s;
        ...(略)
    }    
    

最最最基本的寫法,這樣就可以動囉!

範例中關鍵影格使用了不同的顏色屬性,來看看自動生成的顏色:

豪美啊~~

其他的屬性定義還有:

  1. animation-duration: 持續時間
  2. animation-delay: 延遲播放時間
  3. animation-timing-function: 轉場(補間方式)效果函式

咦咦咦!!這是不是有點眼熟?
來回憶一下上一篇提到的 Transition 轉場動畫的基本屬性:

  1. transition-duration: 持續時間
  2. transition-delay: 延遲播放時間
  3. transition-timing-function: 轉場(補間方式)效果函式

嗯~真的有 87% 像呢!
噢~因為都是「動畫」這回事嘛!

而 transition 的 transition-property: 屬姓名 (要生效的屬性) 就相當於 animation 的 animation-name: 動畫名 (要生效的動畫) 的角色。

除了上述跟 transition 類似的屬性外,還有以下:

  • animation-iteration-count: 數字 指定動畫重複執行次數

    • 數字(次數)
    • :infinite 無限循環
  • animation-direction: 指定動畫方向

    • : reverse 逆向
    • : alternate :頭尾相接:隨播放次數正向→反向→正向→反向→…
  • Codepen 栗子


開啟 Codepen 來玩看看吧!


個人 Blog: https://eudora.cc/


上一篇
[CSS] Transform 變形 & Transition 轉場
下一篇
Ajax - 以 GET 方法串接 API 資料 ( 以 JSON 為例 )
系列文
For 前端小幼苗的圖解筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言