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

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

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

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

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

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

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

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

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

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

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

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

<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. Затем динамически добавьте нужные классы:

$('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, и появление подобной библиотеки сильно упрощает ее применение, а, кроме того, вся анимация является кроссбраузерной, что само по себе – огромный плюс.

Автор: Sara Vieira

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

Комментарии Facebook:

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

  1. Василий

    Спасибо за интересную рассылку. Так как я недавно занялся версткой сайтов всегда узнаю что-нибудь новое. Но у меня вопрос: куда надо прописывать код JavaScript ?

  2. Петр

    Пожалуйста, подскажите как можно оптимизировать сложную страницу (много img с анимацией), пробовал velocity.js, простую jquery animate, работает медленнее css transform и animate, что можно сделать?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree