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

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

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

Что такое Animate.css?

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

Применение Animate.css

Первое, что нужно сделать для использования данной библиотеки после ее скачивания – это подключить ее в свой HTML файл:

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

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

Представьте себе такой HTML:

Вам требуется анимировать раздел при нажатии кнопки с помощью fade. Сначала назначьте ему непрозрачность 0. Затем динамически добавьте нужные классы:

Если хотите, в CSS можно модифицировать скорость анимации, как показано здесь:

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

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

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

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

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

Заключение

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

Автор: Sara Vieira

Источник: //www.developerdrive.com/

Редакция: Команда webformyself.

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (3)