Показать сообщение отдельно
  #1 (permalink)  
Старый 11.04.2017, 13:51
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

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

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