В текущей анимации есть рывки синих кругов. Подскажите пожалуйста, как можно это исправить, а так же сделать так, чтобы на синих кругах не было видно красных кругов, z-index почему-то не срабатывает
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.items {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
.item {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
border-radius: 50%;
}
.item:nth-child(1) {
--size: 350px;
--degress: 30deg;
width: var(--size);
height: var(--size);
transform: translate(-50%, -50%) rotate(var(--degress));
animation: an1 30s linear infinite;
}
.item:nth-child(2) {
--size: 300px;
--degress: 45deg;
width: var(--size);
height: var(--size);
transform: translate(-50%, -50%) rotate(var(--degress));
animation: an2 40s linear infinite;
}
.item:nth-child(3) {
--size: 250px;
--degress: 60deg;
width: var(--size);
height: var(--size);
transform: translate(-50%, -50%) rotate(var(--degress));
animation: an3 20s linear infinite;
}
.item:nth-child(4) {
--size: 200px;
--degress: 75deg;
width: var(--size);
height: var(--size);
transform: translate(-50%, -50%) rotate(var(--degress));
animation: an4 50s linear infinite;
}
.circle {
width: 100px;
height: 100px;
background: blue;
border-radius: 50%;
position: absolute;
top: 50%;
left: -10px;
}
@keyframes an1 {
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes an2 {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes an3 {
from {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes an4 {
from {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="items">
<div class="item">
<div class="circle"></div>
</div>
<div class="item">
<div class="circle"></div>
</div>
<div class="item">
<div class="circle"></div>
</div>
<div class="item">
<div class="circle"></div>
</div>
</div>