Как я могу изменить свой код, чтобы получить более простую форму и более яркие мигающие точки? ⇐ CSS

[Anonymous]

Я хочу, чтобы точки мигали одна за другой в одном направлении, а затем мигание должно было вернуться назад, и все это должно происходить в цикле. Я создал код CSS с помощью Javascript в соответствии с первыми пятью точками. Что я могу сделать, чтобы сократить весь необходимый код в CSS? Также я хочу сделать невидимым черный фон точек во время мигания.

Код: Выделить всё

for (let i = 0; i < 40; i++) {
const dots = document.createElement("div");
document.body.appendChild(dots).classList.add("dots");
}

Код: Выделить всё

body {
background-color: #737373;
display: flex;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
overflow: hidden;
}

.dots {
background-color: rgb(0, 0, 0);
width: 20px;
height: 20px;
border-radius: 50%;
}

.dots:nth-of-type(1)::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
animation: bright 0.3s linear;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 3px 3px rgb(255, 255, 255),
0 0 5px 5px rgb(255, 255, 255), 0 0 12px 12px rgb(255, 255, 255);
opacity: 0;
animation-delay: 0s;
}

.dots:nth-of-type(2)::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
animation: bright 0.3s linear;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 3px 3px rgb(255, 255, 255),
0 0 5px 5px rgb(255, 255, 255), 0 0 12px 12px rgb(255, 255, 255);
opacity: 0;
animation-delay: 0.25s;
}

.dots:nth-of-type(3)::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
animation: bright 0.3s linear;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 3px 3px rgb(255, 255, 255),
0 0 5px 5px rgb(255, 255, 255), 0 0 12px 12px rgb(255, 255, 255);
opacity: 0;
animation-delay: 0.5s;
}

.dots:nth-of-type(4)::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
animation: bright 0.3s linear;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 3px 3px rgb(255, 255, 255),
0 0 5px 5px rgb(255, 255, 255), 0 0 12px 12px rgb(255, 255, 255);
opacity: 0;
animation-delay: 0.75s;
}

.dots:nth-of-type(5)::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
animation: bright 0.3s linear;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 3px 3px rgb(255, 255, 255),
0 0 5px 5px rgb(255, 255, 255), 0 0 12px 12px rgb(255, 255, 255);
opacity: 0;
animation-delay: 1s;
}

@keyframes bright {

0%,
100% {
opacity: 0;
}

50% {
opacity: 1;
}
}

Подробнее здесь: https://stackoverflow.com/questions/792 ... nking-dots