大家好哇，我是梦辛工作室的灵，最近在写加载中的动画效果，看着 抖音 那个加载中的效果看着很不错，就是两个小球，旋转的那个动画， 于是乎，想着自己也来写一个，先来看看效果图：
看着还不错把，现在先来分析一下动画流程，先一个一个来，先看左边小球：
大概有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>
好了，收=-=
