Библиотека CSS3 анимации

В этом посте я хочу поделиться с вами одним, на мой взгляд, весьма интересным ресурсом.

На этом сайте вы можете посмотреть все имеющиеся CSS3 эффекты в действии и скачать css файл с их свойствами к себе в проект.

Думаю вы замечали на landing page, как при прокрутке страницы ее содержимое выезжает с боковых сторон сайта, что-то подобное и я сделал для иллюстрации возможностей этой библиотеки с css эффектами.

Как использовать CSS библиотеку анимационных эффектов?

1. Скачиваем css файл библиотеки и добавляем к себе как обычный файл стилей

	<link rel="stylesheet" type="text/css" href="css/animate.css">

2. Теперь с помощью jQuery определяем элемент к которому динамически добавляем обязательный класс animated и класс нужного эффекта, например:

$('#yourElement').addClass('animated bounceOutLeft');

3. Вы также можете настроить время выполнения анимации, задержку или кол-во ее повторов, добавив такие свойства к нужному классу(элементу):

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

Выводы

Использовать эту библиотеку можно и как пособие по CSS эффектам. Можно посмотреть реализацию нужного вам эффекта и применить только его в вашем проекте не загружаю всю библиотеку.
А в паре с библиотекой jQuery сделать ваш сайт более живым и отзывчивым к действиям пользователя не составит особого труда 🙂

Метки: CSS, CSS3, CSS3 анимация, CSS3 плавные переходы, CSS3 эффекты, featured, Библиотека CSS3 анимации

Рубрика: CSS, jQuery, Online инструменты, Программы и скрипты, Скачать