25.07.2025 —

Как использовать Animate.css

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

Как использовать Animate.css?

Первым шагом является загрузка библиотеки с официального сайта и её подключение к нужной веб-странице.

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

После этого у вас есть доступ ко всей анимации доступной по адресу animate.cssТеперь все что вам нужно - это добавить нужному div'у класс соответствующий нужной анимации и задать время за которое она произойдёт.Например:

<h1 class="animated flash">Hello</h1>

Если вы хотите чтобы анимация начиналась после клика на какую-нибудь кнопку то придётся применить немного знаний Javascript.Представим структуру:

<button>Click</button><section>Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur a felis in nunc fringilla tristique. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui.</section>

Итак, вы хотите чтобы анимация начиналась после клика на кнопку. Первым делом зададим ей прозрачность (opacity) 0, и добавим .click(function()

$('button').click(function() {$('section').addClass('animated fadeInLeft');});

При желании можно настроить скорость анимации:

.animated {-webkit-animation-duration: 200ms;-moz-animation-duration: 200ms;animation-duration: 200ms;}

Также можно установить задержку анимации (delay),для этого нужному div'к добавим класс .delay

.delay {-animation-delay: 2s;-webkit-animation-delay: 2s;-moz-animation-delay: 2s;}

Итак, мы научились использовать библиотеку Animate.css и создавать анимацию на сайте

Яндекс.Метрика