Всем нам прекрасно известна библиотека анимаций на чистом CSS animte.css. Но почти все эффекты дико приелись и уже не вызывают вау-эффекта у пользователей. Предлагаем нечто новое.
Что представляет собой CSS3 анимация?
Vivify.css — это набор современных стилей, созданных для анимирования любых элементов на странице сайта. Прелесть в том, что Вы получаете огромное количество качественной анимации, которую легко применить и использовать. Ниже приведем список, где чаще всего может быть применена данная анимация:
- модальный окна;
- при клике на объект;
- при загрузке изображений;
- при скролле страницы.
Список можно расширят вечно, поскольку все ограничения упираются в фантазию фронтенд-разработчика.
Подключение и использование CSS3 анимации
С Вашей стороны потребуется минимум усилий. Первое, что нужно сделать — это скачать файл стилей vivify.min.css и подключить его на Ваш сайт:
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
И теперь просто добавляем класс анимации любому элементу:
<div class="vivify ball">Текст</div>
Некоторые уточнения и дополнительные свойства:
- Всегда указываем класс
vivifyдля объявления анимации; - Если хотим бесконечно повторяющуюся CSS3 анимацию, ставим класс
infinite; - Для задержки и длительности анимации используйте
delay-иduration-соответственно;- Доступные значения: 100,150 до 900,950 1000,1250,1500,1750 до 10000,10250,10500,10750.
Например: delay-2500 для задержки в 2.5 секунды или duration-550 для длительности в 550 мс.
Скачать необходимый файл в сжатом или обычном формате можно по ссылке выше.