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

在上一篇 [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 直接以半形逗號做分隔即完成了群組化的寫法。

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of