html css scss animation loading

用CSS Animation寫出loading動畫

王淳藝 Celia Wang 2022/10/25 12:00:00

0 2418

在每個網頁中多少都會遇到需要loading內容的狀況，今天來介紹一個簡單又普遍的loading效果！

----

STEP 1. 建立 Html 架構

<div class="preloader">
      <div class="circ1"></div>
      <div class="circ2"></div>
      <div class="circ3"></div>
      <div class="circ4"></div>
</div>

首先，先創建四個用於loading的圓點點，這邊可以依據實際需求增減數量，並於最外層包著一塊div。

STEP 2. 撰寫圓點點Css樣式

這邊先統一設定四個圓點的共同樣式大小為寬高10px，背景為藍綠色

.preloader > div {
      background-color: #72c2a1;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      display: inline-block;
}

STEP 3-1. 撰寫loading彈跳動畫

.preloader > div {
      background-color: #72c2a1;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      display: inline-block;
      animation: stretchdelay 0.7s infinite ease-in-out;
}

@keyframes stretchdelay {
   0%, 40%, 100% { 
        transform: translateY(0px);
   }
   20% {
        transform: translateY(-10px);
   }
}

首先需要先把四個圓點加上名為"stretchdelay" 時長0.7秒永遠循環的動畫。

這個動畫在0%(0秒) ~ 20%(0.14秒)之間會慢慢向上移動10px，而在20%(0.14秒) ~ 40%(0.28秒)之間會慢慢回到原點，並直到100%(0.7秒)前都停在原點。

此時的動畫是這樣的效果：

可以發現四個圓點是同時向上移動的，所以看不出循序漸進跳躍的感覺，因此我們需要將圓點各自加上一個屬性：animation-delay: X;

STEP 3-2. loading彈跳動畫的時間差

.preloader .circ1 {
  animation-delay: 0;
}

.preloader .circ2 {
  animation-delay: 0.1s;
}

.preloader .circ3 {
  animation-delay: 0.2s;
}

.preloader .circ4 {
  animation-delay: 0.3s;
}

為了讓每個圓點向上移動的時間不同，我們需要使用到 animation-delay特性，讓每個圓點各自比旁邊的圓點延遲一下下才作向上移動的動作。

只需要注意彼此間隔的時間需要是等差數列，且不能間隔太久，才能夠營造出每個圓點是緊鄰彼此做出波動的感覺唷：）

這樣就大功告成了，一起來欣賞完成的結果吧