CSS微动画 - Loading来了！七彩霓虹灯

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效果带来更不一样的变化～

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创．无意侵权～
如果对你有点帮助，拿去用吧！