Animate.css - сборка классных, кроссбраузерных анимаций для использования в ваших проектах. Все анимации используют возможности CSS3 и находятся в одном файле - animate.css

Использование

Подключаем файл 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');
    }
);

 

Посмотреть демо всех анимаций можно на офф.сайте

СКАЧАТЬСкачек: 678
9,63 Kb
Кто скачал?

ДЕМОПосмотреть
пример