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

Animation 2 步驟 起手式

step1. 定義動畫: @keyframes

@keyframes 動畫名稱{
    from{
        opacity:0.5;
    }
    to{
        opacity:1;;
    }
}

• 給這個動畫一個名稱　@keyframes 動畫名
• 裡面的每一段為「關鍵影格」。
• 除了 from 、 to，還能用百分比來定義

  @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/