CSS动画：做两个简单好用的loading动画

效果展示

loading1

loading2

loading1

准备个居中的灰色圆角背景盒子，单纯为了好看

<div class="loading-box">
</div>

.loading-box {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #d8d8d8;
    border-radius: 5px;
}

放入loading1和三个子元素作为loading1中那三个跳动元素

<div class="loading-box">
    <div class="loading1">
        <div class="loading1-item1"></div>
        <div class="loading1-item2"></div>
        <div class="loading1-item3"></div>
    </div>
</div>

通过margin-top将loading1上下居中，并指定高度和行内元素左右居中

.loading1 {
  height: 34px;
  margin-top: 33px;
  text-align: center;
}

然后设置三个元素的共同样式，通过inline-block让他们排在一行

.loading1-item1, .loading1-item2, .loading1-item3 {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #4b9cdb;
  border-radius: 15px;
}

编写动画，很简单，只是将元素高度变长再变回来

@keyframes loading1-run {
  0% {
    height: 16px;
  }

  50% {
    height: 34px;
  }

  100% {
    height: 16px;
  }
}

将写好的动画添加到三个元素，两个要点：
一是三个元素分别设置 0s , 0.5s， 1s 的延迟
二是设置 infinite （动画循环播放）

.loading1-item1 {
  animation: loading1-run 1.5s ease 0s infinite;
}

.loading1-item2 {
  animation: loading1-run 1.5s ease 0.5s infinite;
}

.loading1-item3 {
  animation: loading1-run 1.5s ease 1s infinite;
}

完成

啰嗦一句，代码中只设置了长度的变化，为什么这个动画看起来还会有一个上下弹动的效果。而且改变元素高度时，元素看起来应该是顶部向下伸长，而不是动画中那样好像底部固定，向上长高再变回来。

原因在于inline-block的对齐方式，三个元素默认按基线对齐。当第0s第一个动画开始变高以后，后面两个还没开始动画的元素也随着第一个元素的基线向下移动了，之后元素每一次刚要回归到本来位置的时候，总有一个元素变高，所以每个元素看起来就好像底部固定向上变高，变化中短暂的空隙造成了弹动的效果。

loading2

准备个居中的灰色圆角背景盒子，单纯为了好看

<div class="loading-box">
</div>

.loading-box {
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #d8d8d8;
    border-radius: 5px;
}

放入loading2和四个子元素作为loading2中那四个转动的元素

<div class="loading-box">
    <div class="loading2">
      <div class="loading2-item1"></div>
      <div class="loading2-item2"></div>
      <div class="loading2-item3"></div>
      <div class="loading2-item4"></div>
    </div>
</div>

设置loading2的长宽，并通过margin上下左右居中

.loading2 {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 27px auto 0 auto;
}

设置四个元素的共同样式

.loading2-item1,
.loading2-item2,
.loading2-item3,
.loading2-item4 {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: red;
}

通过绝对定位，将四个元素分别定位到以四条边的中点为圆心的位置，并加上不同的颜色

.loading2-item1 {
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  background: #CDDC39;
}

.loading2-item2 {
  position: absolute;
  right: -8px;
  top: 50%;
  margin-top: -8px;
  background: #3F51B5;
}

.loading2-item3 {
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  background: #F44336;
}

.loading2-item4 {
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -8px;
  background: #4CAF50;
}

编写动画，旋转360度

@keyframes loading2-run {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

将动画添加给loading2，采用liner(线性动画)，依然循环播放

.loading2 {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 27px auto 0 auto;
  animation: loading2-run 2s linear 0s infinite;
}

完成

结束