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

[Alexbelkevich]

Здравствуйте. У меня есть 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, то они просто всегда будут повторяться.. Получается, только через JS?

Есть сделанная анимация вот тут (правый блок от подбора шин и дисков). Вот как ее заставить так бесконечно работать