CSS анимации на погрузчике

Question

У меня есть загрузчик анимации, но проблема заключается в самом начале это, как он блокирует до анимации совершается

.loader { 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex: 1 0 25%; 
 
    flex-direction: column; 
 
    height: 200px; 
 
    justify-content: center; 
 
    max-width: 25%; 
 
} 
 
.ball-scale > div { 
 
    background-color: #fff; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 100%; 
 
    margin: 2px; 
 
    -webkit-animation-fill-mode: both; 
 
      animation-fill-mode: both; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 
 
      animation: ball-scale 1s 0s ease-in-out infinite; } 
 

 
@keyframes ball-scale { 
 
    0% { 
 
    -webkit-transform: scale(0); 
 
      transform: scale(0); } 
 
    100% { 
 
    -webkit-transform: scale(1); 
 
      transform: scale(1); 
 
    opacity: 0; } } 
 

 
.ball-scale > div { 
 
    background-color: #fff; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 100%; 
 
    margin: 2px; 
 
    -webkit-animation-fill-mode: both; 
 
      animation-fill-mode: both; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 
 
      animation: ball-scale 1s 0s ease-in-out infinite; } 
 

 
.ball-scale-random { 
 
    width: 37px; 
 
    height: 40px; } 
 
    .ball-scale-random > div { 
 
    background-color: black; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 100%; 
 
    margin: 2px; 
 
    -webkit-animation-fill-mode: both; 
 
      animation-fill-mode: both; 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 30px; 
 
    width: 30px; 
 
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 
 
      animation: ball-scale 1s 0s ease-in-out infinite; } 
 
    .ball-scale-random > div:nth-child(1) { 
 
     margin-left: -7px; 
 
     -webkit-animation: ball-scale 1s 0.2s ease-in-out infinite; 
 
       animation: ball-scale 1s 0.2s ease-in-out infinite; } 
 
    .ball-scale-random > div:nth-child(3) { 
 
     margin-left: -2px; 
 
     margin-top: 9px; 
 
     -webkit-animation: ball-scale 1s 0.5s ease-in-out infinite; 
 
       animation: ball-scale 1s 0.5s ease-in-out infinite; }

<div class="loader"> 
 
<div class="loader-inner ball-scale-random"> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div> 
 
</div>

Есть ли что-то, что я могу сделать, чтобы избежать эффект раннего начала? И имея анимацию без круга, заблокированного в начале

Answer 1

Установите начальный масштаб 0, так что каждый шар начинает скрытым:

.loader { 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex: 1 0 25%; 
 
    flex-direction: column; 
 
    height: 200px; 
 
    justify-content: center; 
 
    max-width: 25%; 
 
} 
 
.ball-scale > div { 
 
    background-color: #fff; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 100%; 
 
    margin: 2px; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 
 
    animation: ball-scale 1s 0s ease-in-out infinite; 
 
} 
 
@keyframes ball-scale { 
 
    0% { 
 
     -webkit-transform: scale(0); 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
     opacity: 0; 
 
    } 
 
} 
 
.ball-scale > div { 
 
    background-color: #fff; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 100%; 
 
    margin: 2px; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 
 
    animation: ball-scale 1s 0s ease-in-out infinite; 
 
} 
 
.ball-scale-random { 
 
    width: 37px; 
 
    height: 40px; 
 
} 
 
.ball-scale-random > div { 
 
    background-color: black; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 100%; 
 
    margin: 2px; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 30px; 
 
    width: 30px; 
 
    webkit-transform: scale(0); 
 
    transform: scale(0); 
 
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 
 
    animation: ball-scale 1s 0s ease-in-out infinite; 
 
} 
 
.ball-scale-random > div:nth-child(1) { 
 
    margin-left: -7px; 
 
    -webkit-animation: ball-scale 1s 0.2s ease-in-out infinite; 
 
    animation: ball-scale 1s 0.2s ease-in-out infinite; 
 
} 
 
.ball-scale-random > div:nth-child(3) { 
 
    margin-left: -2px; 
 
    margin-top: 9px; 
 
    -webkit-animation: ball-scale 1s 0.5s ease-in-out infinite; 
 
    animation: ball-scale 1s 0.5s ease-in-out infinite; 
 
}

<div class="loader"> 
 
\t <div class="loader-inner ball-scale-random"> 
 
\t \t <div></div> 
 
\t \t <div></div> 
 
\t \t <div></div> 
 
\t </div> 
 
</div>