設定動畫影格

// from - to
@keyframes ani {
  from {
    // 第 0 個影格
    屬性: 值;
  }
  to {
    // 最後一個影格
    屬性: 值;
  }
}

// % 數指定
@keyframes ani {
  0% {
    屬性: 值;
  }
  50% {
    屬性: 值;
  }
  100% {
    屬性: 值;
  }
}

// 也可一起寫
@keyframes ani {
  0%,50%,100% {
    do someting ...
  }
	25%,75% {
    do someting ...
  }
}

CSS 中的動畫屬性

• 動畫名稱 (對應 keyframes ) animation-name: 動畫名;
• 動畫時間 animation-duration: 時間;
• 動畫次數 animation-iteration-count: infinite;
  • infinite 重複無限次播放
  • 以數字代表次數
• 動畫方向 animation-direction
  • reverse 反轉播放，從後往前
  • alternate 從前往後再從後往前，例如星星閃爍，opacity 0 - 100 - 0
• 動畫延遲 animation-delay 延遲指定時間後播放

假如有延遲播放又需要從最開始影格播放，就需要加上 animation-fill-mode: both

簡寫

animation: 動畫名 時間 延遲時間 次數

控制動畫播放

animation-play-state

.cssName {
  animation: ...
  &:hover {
    // 當滑鼠滑入 .cssName 時，停止動畫
    animation-play-state: paused
  }
}

範例

利用 sass 迴圈與動畫運用

https://codepen.io/youtingluo/pen/KKXpPav?editors=1100