Последовательная анимация блоков jQuery?

Question

[NDL]

Ребят привет.

Как правильно сделать анимацию блоков друг за другом с автоматической задержкой.
Для анимации использую animate.css.

В таком ключе: слева появился логотип + 0.3 сек появился телефон + 0.2 сек появилось меню + 1 сек появился контент на сайте.

Answer 1

[Денис Инешин]

1. Открываем мануал: https://github.com/daneden/animate.css
2. Находим секцию: https://github.com/daneden/animate.css#usage
3. Смотрим абзац "You can also detect when an animation ends:"

Answer 2

[Aleksandr]

@keyframes fadeIn
{
0%   {opacity: 0;}
100% {opacity: 1;}
}

@-webkit-keyframes fadeIn
{
0%   {opacity: 0;}
100% {opacity: 1;}
}
.items.animated .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
}
.items.animated .fadeIn.fade1 {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;  
}
.items.animated .fadeIn.fade2 {
  -webkit-animation-delay: .4s;
  animation-delay: .4s;  
}
.items.animated .fadeIn.fade3 {
  -webkit-animation-delay: .6s;
  animation-delay: .6s;  
}

А так нельзя?

Comments

[NDL]

Так можно, но хотелось бы скрипт который сам добавляет задержку к предыдущему блоку.

[Aleksandr]

NDL: кто-то тут писал: "На кой черт использовать Js, если можно сделать на css" ;)

[NDL]

Sashjkeee: Так как страница длинная у меня работает еще viewportchecker, блок появился экране и появился. Это все выглядит красиво на экране до 15 дюймов, но на 27 все появляется одновременно.

Можно конечно delay прописать для каждого элемента, но и если человек не скролит, то он и не увидит анимации.

Вопрос, как связать viewportchecker с delay, да и так что бы одинаковы выглядело на 13 и 27 дюймовах экранах!