Почему добавление границы-радиуса помешает моей анимации CSS работать? [закрыто] ⇐ CSS

[Anonymous]

У меня есть небольшой круглый элемент (:: после), который я хочу повернуть вокруг его собственного центра. Анимация работает, как и ожидалось, пока я не расстроен границы-радиус: 50%. Как только я это сделаю, элемент перестает вращаться и кажется статичным. < /P>
Почему это происходит? И как я могу исправить это при сохранении границы-радиуса: 50%? p> вот мой код: < /p>


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: whitesmoke;
}

.loader {
width: 10rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: blueviolet;
position: relative;
/* animation: rotate-circle 4s linear infinite reverse; */
}

@keyframes rotate-circle {
100% {
rotate: 360deg
}
}

.loader::before {
content: "";
width: 8rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: whitesmoke;
position: absolute;
}

.loader::after {
content: "";
width: 2.5rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: blueviolet;
box-shadow: 0 0 0.25rem blueviolet,
0 0 0.5rem blueviolet,
0 0 0.75rem blueviolet,
0 0 1rem blueviolet,
0 0 1.25rem blueviolet,
0 0 1.5rem blueviolet,
0 0 1.75rem blueviolet,
0 0 2rem blueviolet,
0 0 2.5rem blueviolet,
0 0 4rem blueviolet,
0 0 6rem blueviolet;
position: absolute;
top: -0.25em;
left: 4.5rem;
animation: spin 3s linear infinite reverse;

}

@keyframes spin {
from {
transform: rotate(-360deg);
}

to {
transform: rotate(360deg);
}
}< /code>
< /code>
< /div>
< /div>
< /p>
Я попытался применить границу-радиус: 50% к :: после элемента Полем Без этого анимация работает, как и ожидалось, но как только я не погрузился в границу, вращение останавливается, и элемент выглядит статичным. Я ожидал, что элемент продолжит плавно вращаться вокруг своего центра. Почему это происходит, и как я могу это исправить?


Подробнее здесь: https://stackoverflow.com/questions/794 ... om-working