1

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

1 ответ 1

2

Так как элемента два, я принял, что анимация должна работать по следующему флоу:

Растягиваем/сжимаем первый блок, - после завершения анимациии для первого блока переходим ко второму, - растягиваем/сжимаем второй блок.

И так по кругу.

UPD. после комментариев ответ был обновлен до большего кол-ва элементов

<!-- CSS -->
@keyframes blurFadeIn {
 0%   { height: 0; }
 20%  { height: 100px; }
 80%  { height: 100px; }
 100% { height: 0; }
}
.startAnimation {
    -webkit-animation: blurFadeIn 2s ease-in backwards;
    -moz-animation: blurFadeIn 2s ease-in backwards;
    -ms-animation: blurFadeIn 2s ease-in backwards;
    animation: blurFadeIn 2s ease-in backwards;
}
.el {
  border: 1px solid red;
}

<!-- HTML -->
<div class="startAnimation el el1">first</div>
<div class="el el2">second</div>
<div class="el el3">third</div>
<div class="el el4">fourth</div>
<div class="el el5">fifth</div>

<!-- JQUERY -->
var animationElsMap = {
  ".el1": "startAnimation",
  ".el2": "startAnimation",
  ".el3": "startAnimation",
  ".el4": "startAnimation",
  ".el5": "startAnimation",
};
var index = 1;

function myAnimation(currEl) {
  index = (index === Object.keys(animationElsMap).length) ? 1 : index + 1;
  var nextEl = ".el" + index;

  $(nextEl).bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function() { myAnimation(nextEl); });
  $(nextEl).addClass(animationElsMap[nextEl]);

  $(currEl).removeClass(animationElsMap[currEl]);
  $(currEl).unbind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend");
}

$(".el1").bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function() {
  myAnimation(".el1");
});

Код положил в пример

7
  • На самом деле это я два показал. В реале элементов будет 10, и крутиться они будут по 2. verstka.test30.ru/test вот тут справа от подбора шин и дисков понятно, о чем речь.. 11 апр 2017 в 10:52
  • @АлександрБелькевич обновил пример для 5 элементов. Легко можно эаэкстендить до любого кол-ва блоков, наполняя animationElsMap. Пример на jsfiddle тоже обновил 11 апр 2017 в 11:35
  • спасибо! А подскажите пожалуйста. Почему 3 элемент как-то медленней отрабатывает, чем остальные. И после того как все элементы пройдут, на втором круги останавливается анимация на втором элементе.. 11 апр 2017 в 11:42
  • @АлександрБелькевич 3му элементу был назначен другой класс анимации для примера. Вы можете задать новую анимацию и положить в animationElsMap соответствие. Обновил ответ и пример на jsfiddle, теперь на втором не останавливается, а ходит по кругу 11 апр 2017 в 11:59
  • Замечательно! Спасибо Вам огромное! Только подскажите, пожалуйста. В чем моя ошибка jsfiddle.net/35x9458w/5 вот тут меняю на свои классы - работать перестает после первой анимации 11 апр 2017 в 14:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.