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 that you have read and understand our privacy policy and code of conduct.

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