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;
}
複製代碼

完成

結束