Q: 今天叫醒你的是什麼？
A: 是迷糊中醒來後，看到草稿不見的震撼(✘﹏✘ა)

繼上一篇 Loading 動畫，本篇做的是另一種 Loading 效果，這篇比較特別的是動畫疊加，同一個元素可以演繹的動畫不只一個，元素可以在執行 A 動畫的同時也演繹 B 動畫。同上一篇先來個點點吧！

<style>
  .container {
    position: relative;
    width: 55px;
    height: 60px;
    animation: round 1s linear infinite;
  }
  .dot {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: gray;
    border-radius: 50%;
  }
  .dot:nth-child(1) {
    top: 0;
    left: calc(50% - 7.5px);
  }
  .dot:nth-child(2) {
    top: calc(33.33% - 7.5px);
    left: calc(100% - 15px);
  }
  .dot:nth-child(3) {
    top: calc(66.67% - 5px);
    left: calc(100% - 15px);
  }
  .dot:nth-child(4) {
    top: calc(100% - 15px);
    left: calc(50% - 7.5px);
  }
  .dot:nth-child(5) {
    top: calc(66.67% - 5px);
    left: 0;
  }
  .dot:nth-child(6) {
    top: calc(33.33% - 7.5px);
    left: 0;
  }
</style>
<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

首先讓點點大小縮放，並讓透明度有改變

這時候每個.dot的動畫都會是同步的。
這裡有個也是偷吃步的寫法：
由於fadeAnimation在腳本的0%和100%都是一樣的樣式，所以可以直接用逗號隔開%數，任意%數如果樣式相同都可以用這個方式寫在一起就可以了。

<style>
  .dot {
    animation: fadeAnimation 1s infinite;
  }
  @keyframes fadeAnimation {
    0%, 100% {
      opacity: 1;
      transform: none;
    }
    50% {
      opacity: .1667;
      transform: scale(.8);
    }
  }
</style>

要讓每個元素演繹動畫時有時間落差

這時候就會用到 animation-delay。總共有六個點，每次動畫演繹為1秒的情況下，希望每個 .dot 可以流暢的變色，會以1秒除以6，當第二個 .dot 開始演動畫時，第一個 .dot 的動畫已經演繹0.1667秒了，每個 .dot 都比上一個多延遲0.1667秒。

<style>
  .dot:nth-child(1) {
    animation-delay: 0s;
  }
  .dot:nth-child(2) {
    animation-delay: .1667s;
  }
  .dot:nth-child(3) {
    animation-delay: .3333s;
  }
  .dot:nth-child(4) {
    animation-delay: .5s;
  }
  .dot:nth-child(5) {
    animation-delay: .6667s;
  }
  .dot:nth-child(6) {
    animation-delay: .8333s;
  }
</style>

元素可以演繹多個腳本

上述還有提到動畫可以疊加，在演繹放大縮小動畫的同時，還可以再寫另一個動畫讓背景色有漸變的效果，下面直接上程式碼，寫法如下：

<style>
  .dot {
    animation: fadeAnimation 1s infinite, colorAnimation 1.5s infinite;
  }
  @keyframes colorAnimation {
    0%, 100% {
      background-color: LightPink;
    }
    16.67% {
      background-color: SandyBrown;
    }
    33.33% {
      background-color: Gold;
    }
    50% {
      background-color: MediumAquamarine;
    }
    66.67% {
      background-color: LightSkyBlue;
    }
    83.33% {
      background-color: plum;
    }
  }
</style>

animation: 動畫1的設定, 動畫2的設定, 動畫3的設定 ...
透過本篇的animation-delay及一個元素演繹多個腳本，為Loading效果帶來更不一樣的變化～

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創．無意侵權～
如果對你有點幫助，拿去用吧！