7 февр. 2024

Как подключить Animate.css - библиотеку готовых анимаций для Craftum

Animate.css - это библиотека готовых кроссбраузерных анимаций для использования в ваших веб-проектах. Отлично подходит для выделения элементов, домашних страниц, ползунков и подсказок для привлечения внимания.

Подключение в <head>

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

или строчно

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Простой класс

animate__animated  animate__fadeInDownBig

Задержка по времени

animate__animated  animate__fadeInDownBig__delay-5s

Повторение

animate__animated animate__rubberBand animate__repeat-3	3

Более подробно и все анимации на сайте

Можно также добавить класс `infinite` для бесконечного цикла, задержку и продолжительность эффекта:

Задержка:

Название класса	время задержки
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s

Продолжительность:

Название класса	скорость
slow	2s
slower	3s
fast	800ms
faster	500ms

Пример:

<div class="animated infinite bounce delay-5s slower">Пример</div>

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

<style>
.yourElement {
   animation-duration: 3s;
   animation-delay: 2s;
   animation-iteration-count: infinite;
}
</style>

Ссылка на библиотеку