11 485 Полезно

Animate.css - сборка CSS3 анимаций

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

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

Подключаем файл animate.css перед тегом <head>:

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

Чтобы применить анимацию, нужно добавить класс .animated и класс анимации, например .swing:

<div class="swing animated">анимация swing</div>

JS

При подключении библиотеки jQuery, возможности использования animate.css переходят на новый уровень.
Анимация при наведении.
Ищем элементы по селектору .animated, для которых при наведении мы будем добавлять класс анимации - swing.

$('.animated').hover(
    function() {
        $(this).addClass('swing');
    },
    function() {
        $(this).removeClass('swing');
    }
);

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

Скачать 1013Загрузок 9,63 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

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