CSS 实现旋转的小球加载 动画

大家好哇，我是梦辛工作室的灵，最近在写加载中的动画效果，看着 抖音 那个加载中的效果看着很不错，就是两个小球，旋转的那个动画， 于是乎，想着自己也来写一个，先来看看效果图：

看着还不错把，现在先来分析一下动画流程，先一个一个来，先看左边小球：
大概有4个关键帧，先是 X位移0，不缩小，后到 25%的动画，像X位移 小球一半，然后放大1.5，后 50 %又到 右小球的位置，即位移 小球距离，不放大，后 75%又往回位移小球半个距离，缩小0.5，后回到原来的位置，
右边的小球同理，不过方向反一下，下来直接看代码：
css:

@keyframes leftLoad {
    0% {
       transform: translateX(0px) scale(1);
       z-index: 2;
    }
    25%{
        z-index: 5;
        transform: translateX(10px) scale(1.2);
    }
    50%{
        z-index: 2;
        transform: translateX(20px) scale(1);
    }
    75%{
        z-index: 1;
        transform: translateX(10px) scale(0.8);
    }
    100%{
        transform: translateX(0px) scale(1); 
        z-index: 2;
    }
}

@keyframes rightLoad {
    0% {
        transform:  translateX(0px)  scale(1); 
        z-index: 2;
    }
    25%{
        z-index: 1;
        transform: translateX(-10px) scale(0.8);
    }
    50%{
        z-index: 2;
        transform: translateX(-20px) scale(1);
    }
    75%{
        z-index: 5;
        transform: translateX(-10px) scale(1.2);
    }
    100%{
        transform: translateX(0px) scale(1); 
        z-index: 2;
    }
} 

#loadding :nth-child(1){
    width: 20px;
    height: 20px;
    background: #ED872D;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    animation: leftLoad infinite linear .7s;
}

#loadding :nth-child(2){
    width: 20px;
    height: 20px;
    background: #eaaa65;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2); 
    animation: rightLoad infinite linear .7s;
}

html:

  <div id="loadding" >
    <span></span>
     <span></span>
  </div> 

好了，收=-=