Animate.css — набор кроссбраузерных CSS3 анимаций для сайта

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>

Если мы подключим такой скрипт то все изображения на сайте будут плавно появляться.

Скачать и посмотреть примеры можно на сайте автора

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!