Як користуватися Animate.css

14

Від автора: Давайте подивимося правді в очі, в CSS3 першими привернули нашу увагу анімації і переходи. До того без участі JavaScript’а вони у нас ніяк не виходили. Те, що це CSS, ще не означає, що на допомогу нам не існує бібліотек. Одна з них – Animate.css.

Що таке Animate.css?

Animate.css – це бібліотека, в яку вбудовані десятки класних кроссбраузерных анімацій, якими можна користуватися при розробці свого проекту. Ідея та ж, що у безлічі еквівалентів JavaScript’а, якими ми вже звикли користуватися.

Застосування Animate.css

Перше, що потрібно зробити для використання даної бібліотеки після її скачування – це підключити її в свій HTML-файл:

Після впровадження бібліотеки у веб-сторінку ви отримаєте доступ до будь-якої з її анімацій, і для її виклику до якого-небудь елементу потрібно всього лише призначити йому клас animated, зробити пробіл і ввести назву потрібної анімації. Список анімацій знаходиться тут. Наприклад:

Hello

При перезавантаженні сторінки відразу ж видно, що заголовок H1 вже анимируется. Все відмінно, але зазвичай нам потрібно анімувати елементи при натисканні кнопок або в момент якої-небудь дії з боку користувача. Для цього нам знадобиться трохи JavaScript’а для запуску події click і додати потрібний елемент класи.

Уявіть собі такий HTML:

Click
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.

Вам потрібно анімувати розділ при натисканні кнопки з допомогою fade. Спочатку призначте йому непрозорість 0. Потім динамічно додайте потрібні класи:

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

Якщо хочете, в CSS можна модифікувати швидкість анімації, як показано тут:

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

Крім того, можна змінити розмір затримки анімації і кількість її програшів з допомогою animation-delay і animation-iteration-count.

Також дуже класно вийде, якщо по закінченні анімації викликати функцію і представити для переходу іншу анімацію, або ж просто запустити функцію. Для цього доведеться скористатися подією one, прикріпити його до закінчення анімації і додати елементу клас потрібної нам анімації. В даному випадку я, крім того, додам клас delay, що дозволить отримати затримку між проявом fade in і зникненням fade out:

$(‘section’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, function() {
$(‘section’).addClass(‘delay fadeOutRight’);
});

Що стосується CSS, то потрібно всього лише додати клас delay:

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

Тестуючи свою сторінку після додавання цього фрагмента CSS і JavaScript’а, ви побачите, що створили ідеальну анімацію прояви fade in, вона тримається на сторінці дві секунди, а потім поступово зникає – і при цьому всі анімації, створені з допомогою одного лише CSS.

На сайті Codepen є демопример такої анімації.

Висновок

Ми дуже сильно любимо анімацію CSS, і поява подібної бібліотеки сильно спрощує її застосування, а, крім того, вся анімація є кросбраузерною, що саме по собі – величезний плюс.