От автора: Давайте посмотрим правде в глаза, в CSS3 первыми привлекли наше внимание анимации и переходы. До того без участия JavaScript’а они у нас никак не получались. То, что это CSS, еще не означает, что в помощь нам не существует библиотек. Одна из них – Animate.css.
Что такое Animate.css?
Animate.css – это библиотека, в которую встроены десятки классных кроссбраузерных анимаций, которыми можно пользоваться при разработке своего проекта. Идея та же, что у множества эквивалентов JavaScript’а, которыми мы уже привыкли пользоваться.
Применение Animate.css
Первое, что нужно сделать для использования данной библиотеки после ее скачивания – это подключить ее в свой HTML файл:
|
1 |
<link rel="stylesheet" href="css/animate.min.css"> |
После внедрения библиотеки в веб-страницу вы получите доступ к любой из ее анимаций, и для ее вызова к какому-либо элементу требуется всего лишь назначить ему класс animated, сделать пробел и ввести название нужной анимации. Список анимаций находится здесь. Например:
|
1 |
<h1 class="animated flash">Hello</h1> |
При перезагрузке страницы сразу же видно, что заголовок H1 уже анимируется. Все отлично, но обычно нам требуется анимировать элементы при нажатии кнопок или в момент какого-либо действия со стороны пользователя. Для этого нам понадобится немного JavaScript’а для запуска события click и добавить нужному элементу классы.
Представьте себе такой HTML:
|
1 2 3 4 |
<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> |
Вам требуется анимировать раздел при нажатии кнопки с помощью fade. Сначала назначьте ему непрозрачность 0. Затем динамически добавьте нужные классы:
|
1 2 3 |
$('button').click(function() { $('section').addClass('animated fadeInLeft'); }); |
Если хотите, в CSS можно модифицировать скорость анимации, как показано здесь:
|
1 2 3 4 5 |
.animated { -webkit-animation-duration: 200ms; -moz-animation-duration: 200ms; animation-duration: 200ms; } |
Кроме того, можно изменить размер задержки анимации и количество ее проигрышей с помощью animation-delay и animation-iteration-count.
Также очень классно получится, если по окончании анимации вызвать функцию и представить для перехода другую анимацию, или же просто запустить функцию. Для этого придется воспользоваться событием one, прикрепить его к окончанию анимации и добавить элементу класс нужной нам анимации. В данному случае я, кроме того, добавлю класс delay, что позволит получить задержку между проявлением fade in и исчезновением fade out:
|
1 2 3 |
$('section').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { $('section').addClass('delay fadeOutRight'); }); |
Что касается CSS, то потребуется всего лишь добавить класс delay:
|
1 2 3 4 5 |
.delay { -animation-delay: 2s; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; } |
Тестируя свою страничку после добавления этого фрагмента CSS и JavaScript’а, вы увидите, что создали идеальную анимацию проявления fade in, она держится на странице две секунды, а затем постепенно исчезает – и при этом все анимации созданы с помощью одного лишь CSS.
На сайте Codepen есть демопример такой анимации.
Заключение
Мы очень сильно любим анимацию CSS, и появление подобной библиотеки сильно упрощает ее применение, а, кроме того, вся анимация является кроссбраузерной, что само по себе – огромный плюс.
Автор: Sara Vieira
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
Комментарии (3)