Начните CSS анимацию с набора ключевых кадров, затем l oop другой набор ключевых кадров. - PullRequest
Новая
       45

Начните CSS анимацию с набора ключевых кадров, затем l oop другой набор ключевых кадров.

0 голосов
/ 03 мая 2020

Я пытаюсь заставить объект вести с помощью одного CSS набора ключевых кадров анимации, а затем оставить его oop другого ключевого кадра, установленного навсегда. Это возможно?

1 Ответ

1 голос
/ 04 мая 2020

Зависит от того, что вы готовы для этого сделать:)

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

Возможным решением было бы отложить вторую анимацию, пока первая не закончила, следующим образом: 

#test {
  height: 50px;
  width: 50px;
  background: grey;
  animation: 2s firstAnimation forwards, 1s secondAnimation 2s alternate infinite;
  /* the "2s" after "secondAnimation" is for the delay */
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}
<div id="test"></div>

Другой возможный подход - проверить с помощью javascripts onanimationend, а затем добавить вторую анимацию, добавив класс, например: 

let test = document.getElementById("test")
test.onanimationend = function(event) {
  console.log(event) // contains a lot of interesting infos like the name of the animation that ended :)
  test.classList.remove("startFirstAnimation")
  test.classList.add("startSecondAnimation")
}
#test {
  height: 50px;
  width: 50px;
  background: grey;
}

.startFirstAnimation {
  animation: 2s firstAnimation forwards;
}

@keyframes firstAnimation {
  100% {
    width: 100px;
    background: red;
  }
}

.startSecondAnimation {
  width: 100px !important; /* cheating a little bit here to keep the state of the end of the firstAnimation... */
  background: red !important;
  animation: 1s secondAnimation alternate infinite;
}

@keyframes secondAnimation {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}
<div id="test" class="startFirstAnimation"></div>
...