5.2 關於 keyframes

什麼是 keyframes

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

keyframes 的群組化寫法

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

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  66% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

那我們就可以改成寫如下：

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  33%, 66% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

範例