Animate.css - сборка классных, кроссбраузерных анимаций для использования в ваших проектах. Все анимации используют возможности CSS3 и находятся в одном файле - animate.css
Использование
Подключаем файл animate.css перед тегом <head>:
Чтобы применить анимацию, нужно добавить класс .animated и класс анимации, например .swing:
jQuery
При подключении библиотеки jQuery, возможности использования animate.css переходят на новый уровень.
Анимация при наведении.
Ищем элементы по селектору .animated, для которых при наведении мы будем добавлять класс анимации - swing.
Посмотреть демо всех анимаций можно на офф.сайте
Использование
Подключаем файл animate.css перед тегом <head>:
Код
<link rel="stylesheet" href="animate.min.css">
Чтобы применить анимацию, нужно добавить класс .animated и класс анимации, например .swing:
Код
<div class="swing animated">анимация swing</div>
jQuery
При подключении библиотеки jQuery, возможности использования animate.css переходят на новый уровень.
Анимация при наведении.
Ищем элементы по селектору .animated, для которых при наведении мы будем добавлять класс анимации - swing.
Код
$('.animated').hover(
function() {
$(this).addClass('swing');
},
function() {
$(this).removeClass('swing');
}
);
function() {
$(this).addClass('swing');
},
function() {
$(this).removeClass('swing');
}
);
Посмотреть демо всех анимаций можно на офф.сайте