多重动画的权重与顺序

由于 animation 属于 CSS 样式属性，在操作上仍然可能会遇到需要处理“权重”的状况，这篇教学会介绍处理多重动画时 animation 权重以及相关的执行顺序。

阅读更多：CSS 动画 animation、CSS animation 触发事件、自订 CSS 动画路径 offset

快速导览：

• 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 时，就少不了要使用多重动画的技巧，透过这篇教学的介绍，对于多重动画的顺序和权重，应该能有更近一步的认识。

阅读更多：CSS 动画 animation、CSS animation 触发事件、自订 CSS 动画路径 offset

意见反馈