CSS 動畫

• animation 較複雜、客製化的動畫
• @keyframe
• 使用必須考慮某些屬性的支援度

animation-* 語法

animation: (name) (duration) (timing-func) (delay)(iteration-count) (direction)

• -name 綁訂 @keyframe 動畫名稱
• -duration 完成動畫總耗時 (default:0，必須自設定不可省略)
• -timing-function 速度曲線
• -delay 動畫開始前的延遲
• -iteration-count 動畫重複次數
• -direction: alternate 是否輪流反向播放 (好用!!)

  .animated-shake {
    // name , duration , iteration-count
    animation: shake 5s infinite;
    animation-delay: 2s;
    animation-direction: alternate; // 是否反向播放
  }

animation-fill-mode

• 理解animation-fill-mode屬性
• 設定當動畫「開始之前」或「結束之後」的狀態
• 預設 none 一律返回原始狀態
• forwards 會停留在最後的位置
• backwards 會停留在動畫開始的位置(同none)
• both 同時套用 forwards & backwards

  // animate.css 使用此
  .animated {
    animation-fill-mode: both;
  }

animation-play-state

• 動畫播放或暫停狀態

  .house {
    animation-play-state: running;
    &:hover {
      animation-play-state: paused;
    }
  }

animation-timing-function

• linear 速度相等
• ease 默認 低速始->加快->加速前放慢
• ease-in 緩慢開始
• ease-out 緩慢結束
• ease-in-out 緩慢開始 & 結束
• cubic-bezier(n,n,n,n)

@keyframe

• from 表起始 亦可用 0% 表示
• to 表結束 亦可用 100% 表示
• 開頭結尾可省略，程式會自動演算 (但有寫較佳)

  .box {
    position:absolute;
    top: 0;
    left: 0;
    animation: move 2s 1;
  }
  @keyframes move{
    // 0% { top: 0; left: 0; } // 可省略
    20% { left: 50px; }
    80% { top: 50px; }
    100% { right: 0; }
  }

JS 監聽 Animation Events

• animationstart： 當動畫開始時觸發
• animationend： 當動畫結束時觸發
• animationiteration：當動畫重複時觸發
• animationcancel： 當動畫中止(支援度差)

CSSKeyframesRule

• 可用於動畫不中斷、修改動畫樣式
• 原文範例
• 待補....

參考資料

• MDN、w3school
• 完整解析CSS動畫