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

Question

В текущей анимации есть рывки синих кругов. Подскажите пожалуйста, как можно это исправить, а так же сделать так, чтобы на синих кругах не было видно красных кругов, 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>

Answer 1

Рывки возникают из-за угла rotate в анимации - у Вас он не учитывает изначальной трансформации объектов.

Что касается второй проблемы, то, возможно, коллеги меня поправят, но здесь срабатывает т.н. "контекст наложения": поскольку у Вас каждый circle находится внутри своего item, то у них изолированный контекст наложения. Соответственно circle может перекрыть только свой item - другие находятся вне его контекста.

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(-330deg);
  }
}
@keyframes an2 {
  to {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}
@keyframes an3 {
  from {
    transform: translate(-50%, -50%) rotate(-300deg);
  }
}
@keyframes an4 {
  from {
    transform: translate(-50%, -50%) rotate(435deg);
  }
}

<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>

БЛОГ НА HUSL

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

Ответы (1 шт):