HTML, CSS, javascript, PHP

Удобно когда анимация срабатывает не сразу при загрузке страницы, а после прокрутки страницы, когда html элементы, к которым применяется анимация становятся видны.

Для этого в дополнении к файлу с css анимацией >> Добавление CSS анимации на сайт

будем использовать WOW плагин.

Для этого подключаем файл плагина:

<script src="/js/wow.min.js"></script>
<script>
 new WOW().init();
</script>

Или так:

var wow = new WOW(
  {
    boxClass:     'wow',      // класс, скрывающий элемент до момента отображения на экране (по умолчанию, wow)
    animateClass: 'animated', // класс для анимации элемента (для новой версии анимации, animate__fadeInLeft)
    offset:       0,          // расстояние в пикселях от нижнего края браузера до верхней границы элемента, необходимое для начала анимации (по умолчанию, 0)
    mobile:       true,       // включение/отключение WOW.js на мобильных устройствах (по умолчанию, включено)
    live:         true,       // поддержка асинхронно загруженных элементов (по умолчанию, включена)
    callback:     function(box) {
      // функция срабатывает каждый раз при старте анимации
      // аргумент box — элемент, для которого была запущена анимация
    },
    scrollContainer: null // селектор прокручивающегося контейнера (опционально, по умолчанию, window)
  }
);
wow.init();

Настройки для html элементов:

wow — стандартный класс WOW.js, скрывающий элемент до момента отображения на экране;

slideInLeft — один из эффектов библиотеки Animate.css (более подробно — в документации);

data-wow-duration — изменяет время анимации;

data-wow-delay — задержка перед запуском анимации;

data-wow-offset — расстояние в пикселях от нижнего края браузера до верхней границы элемента необходимое для начала анимации;

data-wow-iteration — количество повторений анимации;

И дальше, чтобы плагин срабатывал там где нужно, прописываем класс wow и класс для анимации:

<h1 class="wow slideInLeft">Bootstrap starter template</h1>

Теперь, при прокрутке страницы css эффект slideInLeft сработает только тогда, когда станет виден на странице.

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10">
</div>

• data-wow-duration — изменяет время анимации;
• data-wow-delay — задержка перед запуском анимации;
• data-wow-offset — расстояние в пикселях от нижнего края браузера до верхней границы элемента необходимое для начала анимации;
• data-wow-iteration — количество повторений анимации;

Для новой версии анимации класс html блока - wow animate__animated animate__fadeInLeft