подскажите как можно реализовать данную анимацию по клику.
В чем заключается суть
При клике на должен появляться один из блоков particle__box после второго клика первый блок должен удалятся и появляться следующий и так по порядку пока не дойдем до последнего блока particle__box и начинам сначала, то есть замкнутая цепь должна быть.
HTML
<div class="particle__box" style="transform: rotate(115.872deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(190.065deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(212.398deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(153.107deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(86.0031deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(80.3415deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(291.074deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(301.231deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(343.08deg);">
<div class="particle" data-deg="0"></div>
</div>
<div class="particle__box" style="transform: rotate(284.42deg);">
<div class="particle" data-deg="0"></div>
</div>
CSS
.particle__box {
left: 50%;
position: absolute;
top: 50%;
}
.particle {
-webkit-animation: particle_anim 1s backwards;
animation: particle_anim 1s backwards;
background: #fff;
border-radius: 100%;
height: 12px;
width: 12px;
z-index: 2;
}
@keyframes particle_anim {
0% {
opacity: 1;
-webkit-transform: translate(2vmin,2vmin) scale(1);
transform: translate(2vmin,2vmin) scale(1);
}
100% {
opacity: 0;
-webkit-transform: translate(35vmin,35vmin) scale(0);
transform: translate(35vmin,35vmin) scale(0);
}
}