0

У меня есть два блока, на каждом есть анимация вращения блока, в чем суть вопроса, на одной анимации 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>

3
  • интересно как Вы представляете решение, почему не сделать везде по 2 или везде по 3 ? 13 ноя 2022 в 21:51
  • Я планировал сделать сделать типо кейса, и хотел сделать так, чтобы блоки пропадали в определенной последовательности, и можно сказать сначала пропадает один блок, затем второй и один два раза прокрутился , второй три раза , ну и тому подобное 13 ноя 2022 в 22:17
  • ну так тут Вы описываете совсем другую задачу) не совсем понимаю что именно Вы хотите исправить - чтобы анимация заканчивалась одновременно? Ну или допустим то что Вы описали в комментарии, блоки пропадают друг за другом, тогда анимация запускается друг за другом или одновременно? если что у анимации есть события которые можно прослушивать, но я не могу понять подойдет ли это Вам 13 ноя 2022 в 23:06

1 ответ 1

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>

5
  • Я не правильно сформулировал, у меня они начинают крутится одновременно, но из-за того, что у них разное количество оборотов, после нескольких оборотов они начинают крутится не одновременно, а один быстрее крутиться , а второй нет, по сути я хотел, чтобы они вращались одновременно, но только тот два раза тот три 14 ноя 2022 в 7:39
  • Или лучше это сделать через джс ? 14 ноя 2022 в 7:46
  • Как я понял синхронизировать нужно именно повороты а не время и их количество, попробуйте пока 3 вместо 2.8 14 ноя 2022 в 11:28
  • Как я понимаю у них происходят обороты не одновременно не из-за времени , а из-за того, что у меня там в тех процентах он поворачивается, а тот в тех, можно ли как-то реализовать это по другому ? 14 ноя 2022 в 11:56
  • исходя из того что я сейчас понимаю в вопросе, я дополнил ответ пересчитав время по формуле 100/6 = 16.6 = 1/6 часть - теперь крутится синхронно, и время соответственно 2 и 3 секунды 14 ноя 2022 в 13:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.