Как сделать бесконечные последовательные анимации?

Question

[Александр Белькевич]

Здравствуйте. У меня есть keyframe

@keyframes blurFadeIn {
 0% {
  height: 0
 }
 20% {
  height: 100px
 }
 80% {
  height: 100px
 }
 100%
  height: 0
 }
}

И есть 2 последовательных вызова

.info-item.item1 .info-company-description {
   -webkit-animation: blurFadeIn 5s ease-in backwards
   -moz-animation: blurFadeIn 5s ease-in backwards
   -ms-animation: blurFadeIn 5s ease-in backwards
   animation: blurFadeIn 5s ease-in backwards
}

.info-item.item2 .info-company-description {
   -webkit-animation: blurFadeIn 5s ease-in 4s backwards
   -moz-animation: blurFadeIn 5s ease-in 4s backwards
   -ms-animation: blurFadeIn 5s ease-in 4s backwards
   animation: blurFadeIn 5s ease-in 4s backwards
}

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

Answer 1

[Юрий]

Так вы просто объедините анимации на одном timeline.

А если вам нужно, чтобы сначала на одном элементе появлялась анимация, заканчивалась, а затем появлялась на другом... И так далее, то здесь вам поможет JS.