Animate.css - Сборник красивой анимации для вашего сайта.
Библиотека включает в себя 56 анимаций, сгруппированных по типу эффекта, включает в себя «вход» и «выход» из анимирования элемента, а так же простой конструктор, который даёт возможность включить в файл только нужные эффекты.
Установка
Установка очень простая, достаточно подключить всего 1 css файл.
<link href="style/animate.css" rel="stylesheet">Вот и всё, теперь нам остается присвоить нужному элементу класс с анимацией. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animate демо</title>
<link href="style/animate.css" rel="stylesheet">
<style>
.demo {
background: #999;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="animated fadeInDown warning">
Сообщение которое всплывает при загрузки страницы.
</div>
</body>
</html>Если на сайте используется jQuery, то добавление классов упрощается и делается через jаvascript. Например:
<script>
$(document).ready(function() {
$('img').addClass('animated fadeIn');
})
</script>Если мы подключим такой скрипт то все изображения на сайте будут плавно появляться.
Скачать и посмотреть примеры можно на сайте автора