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>

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


Оставь свой комментарий


Craftum Создано на конструкторе сайтов Craftum