Как сделать синхронную анимацию

Question

У меня есть два блока, на каждом есть анимация вращения блока, в чем суть вопроса, на одной анимации 2 оборота вокруг себя, а во втором 3, и получается что они крутятся не синхронно, как это исправить ?

.bronzone {
  animation: swapcartsvip 2s forwards;
  height: 200px;
  width: 200px;
  background: linear-gradient(78.09deg, #67331A 0%, #763C21 20.83%, #A8775E 51.56%, #CFBAAE 69.27%, #72361A 100%);
}                  
.bronztwo {
  margin-top: 20px;
  animation: swapcartsvips 2.8s forwards;
  height: 200px;
  width: 200px;
  background: linear-gradient(78.09deg, #67331A 0%, #763C21 20.83%, #A8775E 51.56%, #CFBAAE 69.27%, #72361A 100%);
}
@keyframes swapcartsvip {
                  0% {
                     transform: matrix(1, 0, 0, 1, 0, 0);
                  }
                  25% {
                     transform: matrix(-1, 0, 0, 1, 0, 0);
                  }
                  50% {
                     transform: matrix(1, 0, 0, 1, 0, 0);
                  }
                  75% {
                     transform: matrix(-1, 0, 0, 1, 0, 0);
                  }
                  90% {
                     opacity: 1;
                  }
                  100% {
                     opacity: 0.15;
                     transform: matrix(1, 0, 0, 1, 0, 0);
                  }
               }
               @keyframes swapcartsvips {
                  0% {
                     transform: matrix(1, 0, 0, 1, 0, 0);
                  }
                  10% {
                     transform: matrix(-1, 0, 0, 1, 0, 0);
                  }
                  25% {
                     transform: matrix(1, 0, 0, 1, 0, 0);
                  }
                  50% {
                     transform: matrix(-1, 0, 0, 1, 0, 0);
                  }
                  65% {
                     transform: matrix(1, 0, 0, 1, 0, 0);
                  }
                  80% {
                     transform: matrix(-1, 0, 0, 1, 0, 0);
                  }
                  90% {
                     opacity: 1;
                  }
                  100% {
                     opacity: 0.15;
                     transform: matrix(1, 0, 0, 1, 0, 0);
                  }
               }

<div class="bronzone"></div>
<div class="bronztwo"></div>

Answer 1

По сути если анимация начинается одновременно, то можно на окончании анимации убирать элемент, получиться что они будут убираться последовательно из-за разницы в длительности анимаций, но не понятно что нужно было исправить, поэтому этот ответ в качестве одного из возможных решений:

document.querySelector('.bronzone').addEventListener('animationend', ({target}) => {target.remove()} , {once:true})
document.querySelector('.bronztwo').addEventListener('animationend', ({target}) => {target.remove()} , {once:true})

.bronzone {
  font-size: 42px;
  color: white; 
  animation: swapcartsvip 2s forwards;
  height: 100px;
  width: 100px;
  background: linear-gradient(78.09deg, #67331A 0%, #763C21 20.83%, #A8775E 51.56%, #CFBAAE 69.27%, #72361A 100%);
}                  
.bronztwo {
  font-size: 42px;
  color: white;
  margin-top: 20px;
  animation: swapcartsvips 2.8s forwards;
  height: 100px;
  width: 100px;
  background: linear-gradient(78.09deg, #67331A 0%, #763C21 20.83%, #A8775E 51.56%, #CFBAAE 69.27%, #72361A 100%);
}
@keyframes swapcartsvip {
  0% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  25% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  50% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  75% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  90% {
     opacity: 1;
  }
  100% {
     opacity: 0.15;
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes swapcartsvips {
  0% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  10% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  25% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  50% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  65% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  80% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  90% {
     opacity: 1;
  }
  100% {
     opacity: 0.15;
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

<div class="bronzone">1</div>
<div class="bronztwo">2</div>

Второй вариант:

Здесь за счет пересчета времени ключевых кадров анимации достигнута синхронность вращения обоих блоков.

console.log(Array.from(Array(6)).map((e, i) => (i * 100 /6).toFixed(2)).join(', '))

.bronzone {
  font-size: 42px;
  color: white; 
  animation: swapcartsvip 2s forwards;
  height: 100px;
  width: 100px;
  background: linear-gradient(78.09deg, #67331A 0%, #763C21 20.83%, #A8775E 51.56%, #CFBAAE 69.27%, #72361A 100%);
}                  
.bronztwo {
  font-size: 42px;
  color: white;
  margin-top: 20px;
  animation: swapcartsvips 3s forwards;
  height: 100px;
  width: 100px;
  background: linear-gradient(78.09deg, #67331A 0%, #763C21 20.83%, #A8775E 51.56%, #CFBAAE 69.27%, #72361A 100%);
}
@keyframes swapcartsvip {
  0% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  25% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  50% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  75% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  90% {
     opacity: 1;
  }
  100% {
     opacity: 0.15;
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes swapcartsvips {
  0% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  16.6% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  33.3% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  50% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  66.6% {
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
  83.3% {
     transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  83.3% {
     opacity: 1;
  }
  100% {
     opacity: 0.15;
     transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

<div class="bronzone">1</div>
<div class="bronztwo">2</div>

БЛОГ НА HUSL

Как сделать синхронную анимацию

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