Animate.css — набор кроссбраузерных CSS3 анимаций
Библиотека включает в себя 56 анимаций, сгруппированных по типу эффекта, включает в себя «вход» и «выход» из анимирования элемента, а так же простой конструктор, который даёт возможность включить в файл только нужные эффекты.
Основное использование
1. Для того что бы начать пользоваться анимацией, нам нужно подключить файл animate.min.css, разместив соответствующий код между тегов <head> </head>.
2. Для того что бы анимировать элемент, нам нужно будет подключить два класса. Один из них основной - .animated, который подключает саму анимацию, второй же определяет, какой именно тип будет использоваться. Ниже приведен полный список всех анимаций, которые можно использовать:
|
|
|
Как должен выглядеть пример кода элемента с анимацией? Все очень просто. Возьмем для примера тег h1 и присвоим ему наши два класса. Будет это выглядеть следующим образом.
Класс bounceIn можно заменить на любой другой вариант из списка который был предоставлен выше. Использовать естественно можно не только к тегам, но и к блокам
При подключении библиотеки jQuery, возможности использования animate.min.css переходят на новый уровень. Ищем элементы по селектору .animated, для которых при наведении мы будем добавлять класс анимации - bounceIn.
$('.animated').hover(
function() {
$(this).addClass('bounceIn');
},
function() {
$(this).removeClass('bounceIn');
}
);
</script>
Что бы посмотреть анимации в деле, вы можете зайти на демо страницу и проверить эффекты на практике. Так вам будет удобнее выбрать тот эффект, который вам придется больше по душе.
