Vivify — продвинутая CSS3 библиотека для создания анимации

Всем нам прекрасно известна библиотека анимаций на чистом CSS animte.css. Но почти все эффекты дико приелись и уже не вызывают вау-эффекта у пользователей. Предлагаем нечто новое.

Что представляет собой CSS3 анимация?

Vivify.css — это набор современных стилей, созданных для анимирования любых элементов на странице сайта. Прелесть в том, что Вы получаете огромное количество качественной анимации, которую легко применить и использовать. Ниже приведем список, где чаще всего может быть применена данная анимация:

• модальный окна;
• при клике на объект;
• при загрузке изображений;
• при скролле страницы.

Список можно расширят вечно, поскольку все ограничения упираются в фантазию фронтенд-разработчика.

Подключение и использование CSS3 анимации

С Вашей стороны потребуется минимум усилий. Первое, что нужно сделать — это скачать файл стилей vivify.min.css и подключить его на Ваш сайт:

И теперь просто добавляем класс анимации любому элементу:

Некоторые уточнения и дополнительные свойства:

• Всегда указываем класс vivify для объявления анимации;
• Если хотим бесконечно повторяющуюся CSS3 анимацию, ставим класс infinite;
• Для задержки и длительности анимации используйте delay- и duration- соответственно;
  • Доступные значения: 100,150 до 900,950 1000,1250,1500,1750 до 10000,10250,10500,10750.

Например: delay-2500 для задержки в 2.5 секунды или duration-550 для длительности в 550 мс.

Скачать необходимый файл в сжатом или обычном формате можно по ссылке выше.