8.2 關於 keyframes

什麼是 keyframes

keyframes 中文稱之為關鍵影格，0% 及 100% 分別都是關鍵影格，可設定任何你想設定的百分比，可以是 10%(動畫執行期間的1/10)、50%(動畫執行期間的一半) 等，這些百分比，都是代表動畫執行期間的關鍵影格。

keyframes 的群組化寫法

觀察以下的寫法，在 25% 與 75% 裡面所撰寫的 css 是相同的：

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(360deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

可改寫成如下：

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  25%, 75% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

例：