CSS微动画 - Loading来了！转啊转啊～

Q: 从哪一种Loading开始呢？
A: 转圈圈的Loading应该是基本？

之後将会进入一系列的Loading效果，本篇只会介绍一款，并对其做比较详细的说明！直接开始罗～

<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>

Loading转圈圈

第一款要利用animation实作loading转圈圈，首先先将每个原点设定不同的透明度，再对外层的.container设定animation脚本，定义使用脚本名称为loadingRotate。

<style>
  .dot:nth-child(1) {
    opacity: .1667;
  }
  .dot:nth-child(2) {
    opacity: .3333;
  }
  .dot:nth-child(3) {
    opacity: .5;
  }
  .dot:nth-child(4) {
    opacity: .6667;
  }
  .dot:nth-child(5) {
    opacity: .8333;
  }
  .dot:nth-child(6) {
    opacity: 1;
  }
  .container {
    animation: loadingRotate 1s linear infinite;
  }
</style>

这时候因为还没有定义@keyframes所以元素是不会动的，接着我们就要来写这个动画要怎麽演绎：在一开始的时候(0%)设定元素旋转角度为0，当动画演绎到最後的时候(100%)元素的旋转角度设置为360deg，这样每当元素执行一次动画就会
由0deg演绎到360deg，脚本就完成了。

<style>
  @keyframes loadingRotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

animation参数回顾

每个动画效果都是独立且特别的，依照使用情境将动画的属性做修改。

.container {
  animation: loadingRotate 1s linear infinite;
}

• loadingRotate
  这个值定义属性animation-name，决定元素要演绎哪个脚本。

• 1s
  这个值定义属性animation-duration，元素演绎脚本的期间为一秒钟，元素在一秒内会由0deg演绎到360deg，以达到Loading转圈的效果。

• linear
  这个值定义属性animation-timing-function，预设值为ease会让动画演绎时由慢变快再变慢；由於希望Loading转起来很顺畅，则需要将值改为 linear让动画演绎时等速。

• infinite
  这个值定义属性animation-iteration-count，由於Loading转圈效果是无限执行的，所以将预设的1改为infinite。

简 （偷） 约 （懒） 写法

在脚本内有些过程是可以不写的，不一定要写满0%到100%，如下面例子0%是可以被省略的，原因是元素预设transform的rotate角度就是0，所以当动画在演绎的时候，会从元素原本的状态0deg演绎到360deg，效果是一样的！

<style>
  @keyframes loadingRotate {
    100% {
      transform: rotate(360deg);
    }
  }
</style>

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