body

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

css

<style>
        body {
           background: sandybrown;
       }
       .box {
           width: 100px;
           margin: 50px auto;
       }
       .box>div:nth-child(1) {
           float: left;
           width: 15px;
           margin-left: 10px;
           height: 15px;
           background: #fff;
           border-radius: 50%;
           animation:wys 0.8s infinite;
       }
       .box>div:nth-child(2){
           float: left;
           width: 15px;
           margin-left: 10px;
           height: 15px;
           background: #fff;
           border-radius: 50%;

           animation:wys 0.8s infinite 0.15s;
       }
       .box>div:nth-child(3){
           float: left;
           width: 15px;
           margin-left: 10px;
           height: 15px;
           background: #fff;
           border-radius: 50%;

       //呼叫：
       //animation: 動畫名稱 持續時間；
       //animation: 定義的動畫名稱 持續時間  執行次數  是否反向  運動曲線 延遲執行。(infinite 表示無限次)

           animation:wys 0.8s infinite 0.3s;
       }
       //定義動畫：
       //@keyframes 動畫名{
       //    from{ 初始狀態 }
       //    to{ 結束狀態 }
       //}

       @keyframes wys{
           100%{
               transform: scale(1);
           }

           50%{
               transform: scale(0.3);
           }

           0%{
               transform: scale(1);
           }
       }

   </style>