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

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

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

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

css snimation

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 сделать ваш сайт более живым и отзывчивым к действиям пользователя не составит особого труда 🙂

(3 голосов. Рейтинг: 5,00 из 5)
Загрузка...

2 thoughts on “Библиотека CSS3 анимации

  1. Огромное спасибо! Это как раз то что ищешь и долгими месяцами не знаешь где взять))

    1. Очень рад, что смог вам помочь ))
      Также я написал более подробно про реализацию демо-примера с эффектным появление текстовых блоков.
      Появление элементов сайта с CSS3 эффектами

      Спасибо, что читаете мой блог, пишите вопросы на интересующие вас темы, буду отвечать новыми постами 😉

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *