При работе с CSS анимациями есть ли способ заставить последовательные анимации повторяться бесконечно в заданном порядке - PullRequest
Новая
       13

При работе с CSS анимациями есть ли способ заставить последовательные анимации повторяться бесконечно в заданном порядке

0 голосов
/ 09 июля 2019

Когда я работал с CSS-анимацией, мне нужно было сделать две анимации подряд, но как только я это сделал, я просто вспомнил, что анимации должны повторяться бесконечно.Есть ли способ заставить их повторяться бесконечно в одном и том же порядке, не объединяя анимации, объединяя ключевые кадры, используя только CSS?

Если нет, как я могу сделать это с помощью JavaScript?

Я попытался повторно вызвать анимацию в последнем ключевом кадре последней анимации, но это не сработало, потому что вы можетеанимация. 

.div{

animation: spin 1.6s ease-in-out 0s 1 normal running,
           rotate 1s ease-in-out 1.5s 1 normal running;
}

@keyframes spin {
  from {
    transform: rotateX(0deg);
  }
  99% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateX(360deg);
    animation: spin 1.6s ease-in-out 0s 1 normal running,
               rotate 1s ease-in-out 1.5s 1 normal running;
  }
}
@keyframes rotate {
  from {
    transform: rotatez(0deg) rotatey(0deg);
  }
  to {
    transform: rotatez(-33deg) rotatey(-37deg);

      ;
  }
}

1 Ответ

0 голосов
/ 09 июля 2019

Просто создайте новую анимацию на основе ваших требований: 

.box{
 background:red;
 width:100px;
 height:100px;
animation: spin 2.6s ease-in-out  infinite;
}

@keyframes spin {
  0%{
    transform: rotateX(0deg);
  }
  61.54% { /*1.6s */
    transform: rotateX(360deg) rotatez(0) rotatey(0) translateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotatez(-33deg) rotatey(-37deg) translateZ(1000px);
  }
}
<div class="box">
</div>
...