[CSS Animation] 2. keyframes 中的群組化 - Carlos-Studio

在上一篇 [CSS Animation] 1. 嗨，animation 初步探訪 文章中，已經瞭解到如何建立一個 CSS 動畫，並套用至元素上。讓我們再多看一點關於 keyframes 的部份。

什麼是 keyframes

先前我們介紹過 @keyframes 這個建立 CSS 動畫的語法，如下範例：

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

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

然而動畫在執行的過程當中，就是依據這些關鍵影格來執行，從 0% 開始增加至 100%。例如動畫一開始(0%)，設定旋轉的角度為 0 度，動畫開始執行時，從 0% 開始增加到動畫執行結束時(100%)，旋轉的角度要從 0 度增加至變成 360 度。這就完成了一個 CSS 動畫效果。

keyframes 的群組化寫法

有的時候，在不同的 keyframes，會有相同的設定值，例如：

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

上述的 33% 及 66% keyframes 因為有相同的設定值(也就是旋轉角度都會是 90 度)，故可以用群組化的寫法，如下：

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

將 keyframes 直接以半形逗號做分隔即完成了群組化的寫法。