CSS3 Animation Cheat Sheet - шпаргалка по CSS3 анимации

CSS3 Animation Cheat Sheet - представляет собой набор готовых анимаций в одном файле .css, просто подключаемый к веб-проекту. Все, что вам нужно сделать, это добавить таблицу стилей на ваш сайт и применить готовые классы анимаций CSS для элементов, которые вы хотите анимировать.

CSS3 Animation Cheat Sheet использует CSS3 @keyframes и работает во всех последних браузерах ( даже в IE 10). Используя CSS3 @keyframes, вам не придется беспокоиться о позиционировании элемента для размещения анимации - это будет анимировано на месте. Кроме того, для пользователей со старыми браузерами , анимированный элемент будет виден и на своем месте, даже если анимация не срабатывает.
Ниже приведены инструкции о том, как начать работу.

  1. Скачайте файл стилей с анимациями;
  2. Подключите скачанный файл стилей между тегами <head>...</head> веб-страницы;

    <link rel="stylesheet" href="css/animations.css">

  3. Добавьте класс анимации из файла стилей к тому элементу, который нужно анимировать;

    <div id="object" class="slideUp">

  4. Для срабатывания анимации, вам нужно сделать их невидимыми, добавив свойство visibility: hidden для анимированных элементов:
    #object{ background-color: #fe5652; visibility: hidden; }
По умолчанию анимации сработают сразу при загрузке страницы - даже если элемент в нижней части страницы, но с помощью JQuery есть много способов для активирования анимации в заданное время.
Узнайте, как можно использовать эти анимации на вашем сайте.

Добавление эффектов используя библиотеку JQuery

  1. Подключите jQuery между тегами <head>...</head> веб-страницы;

    <script src="http://code.jquery.com/jquery-1.10.1.min.js">

  2. Добавить это код перед закрывающим тегом </body> для запуска анимации, когда пользователь прокручивает страницу к элементу:
    <script>
        $(window).scroll(function () {
            $('#animatedElement').each(function () {
                var imagePos = $(this).offset().top;
                var topOfWindow = $(window).scrollTop();
                if (imagePos < topOfWindow + 400) {
                    $(this).addClass("slideUp");
                }
            });
        });
    </script>
    #animatedElement - замените на свой элемент, который нужно анимировать.
    slideUp - замените на класс анимации из файла стилей.

  3. Добавить это код перед закрывающим тегом </body> для запуска анимации, когда пользователь нажимает на элемент:
    <script>
        $('#animatedElement').click(function() {
            $(this).addClass("slideUp");
        });
    </script>

Установка модуля