多重動畫的權重與順序

由於 animation 屬於 CSS 樣式屬性，在操作上仍然可能會遇到需要處理「權重」的狀況，這篇教學會介紹處理多重動畫時 animation 權重以及相關的執行順序。

快速導覽：

• animation 權重
• 多重動畫執行順序

animation 權重

由於 animation 屬於 CSS 樣式屬性，使用時會影響到元素樣式的「權重」，基本上 animation 或 animation-* 都會按照 CSS 選擇器的權重規則套用樣式。

延伸閱讀：CSS 選擇器的優先順序 ( 權重 )

但由於 @keyframes 是 CSS 裡的「聲明、定義」語法，如果是寫在 @keyframes 裡的樣式屬性，則會需要額外遵守下列規則：

• 如果有同樣名字的 @keyframes，只會執行「最後一個」 @keyframes。
• @keyframes 裡的樣式屬性等同「inline 行內樣式的權重」的權重 ( 最高 )。
• @keyframes 裡的樣式屬性不支援 !important。
• @keyframes 裡百分比相同裡的樣式屬性，後方會覆蓋前方樣式*
• 使用 CSSKeyframesRule 覆寫 @keyframes 內容，避免透過奇怪的行內樣式語法修改。

下方範例出現了兩個名為 oxxo 的 @keyframes，會執行後方的 @keyframes，而 @keyframes 裡同樣是 50% 的關鍵影格，後方的 background 會覆蓋前方的 background。

線上展示：https://codepen.io/oxxo/pen/xxvBQLj

<!-- HTML 程式碼-->
<h2>把滑鼠移到我身上</h2>
<div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    width: 300px;
    border: 2px solid #000;
  }
  h2:hover~div {
    animation-name: oxxo;
    animation-duration: 2s;
  }
  div {
    width: 50px;
    height: 50px;
    margin: 5px;
    background: red;
  }

  /* 不會執行 */
  @keyframes oxxo{
    50% {
      margin-left: 100px;
      background: cyan;
    }
  }

  /* 執行這個 */
  @keyframes oxxo{
    50% {
      margin-left: 200px;
      background: green;  /* 被後方覆蓋 */
    }
    50% {
      background: yellow;
    }
  }
</style>

多重動畫執行順序

animation-* 相關樣式屬性具有支援「多重動畫」的功能，只要透過「逗號」分隔每個 @keyframes 名稱或對應的動畫設定，就可以讓元素執行多個動畫的關鍵影格，多重動畫基本上會遵照下方原則進行套用或取代樣式。

• 如果有「多個」動畫名稱，但其他動畫樣式只有「一個」，則所有的動畫名稱都會套用這個動畫樣式。
• 如果其他動畫樣式數量「少於」動畫名稱數量，就只會套用「第一個」動畫樣式。
• 如果「同樣百分比」裡有「同樣的樣式屬性」，後方的樣式屬性會「取代」前方的樣式屬性。

下方範例會讓 div 呈現三組不同的 @keyframes 動畫。

線上展示：https://codepen.io/oxxo/pen/YzmgRxB

<!-- HTML 程式碼-->
<h2>把滑鼠移到我身上</h2>
<div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    width: 300px;
    border: 2px solid #000;
  }
  h2:hover~div {
    animation-name: a, b, c;          /* 同時執行 a b c */
    animation-duration: 4s, 2s, 1s;   /* a b c 對應的播放時間 */
  }
  div {
    width: 50px;
    height: 50px;
    margin: 5px;
    background: red;
  }
  @keyframes a {
    50% {background: cyan;}
  }
  @keyframes b {
    50% {margin-left: 100px;}
  }
  @keyframes c {
    50% {
      width: 100px;
      height: 100px;
    }
  }
</style>

多重動畫如果搭配 animation-delay 和 animation-fill-mode: forwards，就能實現「一個動畫結束後再播放下一個動畫」的效果，下方範例有五個 @keyframes，運用 animation-delay 讓第二個之後的 @keyframes 都比前一個多延遲一秒，最後就能實現一個接一個的動畫效果。

線上展示：https://codepen.io/oxxo/pen/OJKqaxJ

<!-- HTML 程式碼-->
<h2>把滑鼠移到我身上</h2>
<div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    width: 300px;
    border: 2px solid #000;
  }
  h2:hover~div {
    animation-name: a, b, c, d, e;
    animation-duration: 1s;
    animation-delay: 0s, 1s, 2s, 3s, 4s;
    animation-fill-mode: forwards;
  }
  div {
    width: 50px;
    height: 50px;
    margin: 5px;
    background: red;
  }

  @keyframes a{
    100% {background: cyan;}
  }

  @keyframes b{
    100% {margin-left: 100px;}
  }

  @keyframes c{
    100% {width: 100px;}
  }

  @keyframes d{
    100% {height: 100px;}
  }

  @keyframes e{
    100% {
      width: 50px;
      height: 50px;
      margin: 5px;
      background: red;
    }
  }
</style>

小結

當要操作進階的 animation 時，就少不了要使用多重動畫的技巧，透過這篇教學的介紹，對於多重動畫的順序和權重，應該能有更近一步的認識。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～