Как использовать Animate.css в HTML для создания потрясающей анимации

Чтобы использовать Animate.css в HTML, выполните следующие действия:

  1. Загрузите Animate.css. Посетите репозиторий Animate.css GitHub ( https://github.com/animate-css/animate.css ) и загрузите последнюю версию библиотеки. Вы можете загрузить весь репозиторий или только файл animate.min.css.

  2. Свяжите файл CSS: поместите загруженный файл animate.min.cssв каталог вашего проекта. Затем добавьте ссылку на файл CSS в раздел вашего HTML-файла следующим образом:

<head>
  <link rel="stylesheet" href="path/to/animate.min.css">
</head>

Обязательно замените «path/to/» фактическим путем к файлу animate.min.css.

  1. Применить анимацию. Вы можете применить анимацию к любому элементу HTML, добавив соответствующие классы CSS из Animate.css. Классы следуют соглашению об именах animate__animationName, где animationName— это конкретная анимация, которую вы хотите использовать. Например, чтобы применить анимацию «отскока» к элементу
    , вы можете сделать следующее:
<div class="animate__animated animate__bounce">Hello, world!</div>
  1. Анимация триггера: по умолчанию анимация запускается сразу после загрузки страницы. Однако, если вы хотите запускать их при определенных событиях, вы можете использовать JavaScript. Например, вы можете использовать свойство classListдля динамического добавления или удаления классов анимации:
<button onclick="document.getElementById('myDiv').classList.add('animate__animated', 'animate__bounce')">Click me!</button>
<div id="myDiv">Hello, world!</div>

В этом примере анимация подпрыгивания будет запускаться при нажатии кнопки.

Вот и все! Теперь вы можете использовать Animate.css для добавления стильной анимации к элементам HTML.