Как сделать css animation без рывков?

Question

[Артур Левенсон]

В текущей анимации есть рывки синих кругов. Подскажите пожалуйста, как можно это исправить, а так же сделать так, чтобы на синих кругах не было видно красных кругов, z-index почему-то не срабатывает

https://codepen.io/kiskiskit/pen/gORYVWg

Comments

[Ankhena]

Подскажите пожалуйста, как можно это исправить

Заканчивать анимацию ровно в том же месте, где вы её начали. А не всегда в нуле (360 или -360).
Вы же пишете, что начальное положение внешнего круга с поворотом 30 градусов. Так и заканчивать нужно в 30 градусах + целый круг.

а так же сделать так, чтобы на синих кругах не было видно красных кругов, z-index почему-то не срабатывает

Если радиус кругов больше, чем расстояние между окружностями, то окружности отдельно, круги отдельно.
css.yoksel.ru/kontekst-nalozheniya

[Артур Левенсон]

Ankhena, спасибо

[Максим]

Артур Левенсон, во видел Ankhena сразу ответила правильно

Answer 1

[Raloynner]

https://codepen.io/rasul312312/pen/oNwNEqw   чутка переделаl твой html css
у тебя не правильно стояли слои.
я так понял у тебя должны быть планеты, теперь в зависимости от того какая планета будет выше, можешь zindex item дать через nth-child

Comments

[Raloynner]

чтоб не было рывков у тебя позиция должна быть 0 360 0
то есть к концу анимации позиция должна быть исходной

[Артур Левенсон]

Спасибо большое