Обновления согласно последним трендам – одно из условий для успешной работы сайта. Важно постоянно отслеживать, выявлять, что способствует, а что останавливает развитие ресурса.
Чтобы красиво сложить сайт требуются знания и применение множества технических аспектов. Если хотите добавить «изюминку» и сделать страницы интереснее – используйте последние обновления стилей CSS. Они помогут изменить внешний вид ресурса - сделать его привлекательным для пользователей.
В нашей статье мы представим новый набор анимаций, который поможет разнообразить ваш ресурс - сделать его современней, увлекательней.
Рассмотрим набор анимации элементов animate.css.
Чтобы начать работу с набором css классов, установите на сайт стили, далее подключайте к необходимым блокам понравившиеся эффекты.
Рассмотрим подробнее установку и использование библиотеки для вашего сайта.
Примеры анимации:
Animation
Выберите анимацию:
Установка
Необходимо загрузить стили на ресурс. Подключить их в head: animate.css
<link rel="stylesheet" href="/animate.css" />
Использование
После подключения css классов – можно приступать к анимированию элементов. Для этого добавьте к нему класс animated и нужный вам эффект из представленной таблицы:
| Название класса | |||
|---|---|---|---|
| bounce | flash | pulse | rubberBand |
| shake | headShake | swing | tada |
| wobble | jello | bounceIn | bounceInDown |
| bounceInLeft | bounceInRight | bounceInUp | bounceOut |
| bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
| fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
| fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
| fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
| fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
| fadeOutUp | fadeOutUpBig | flipInX | flipInY |
| flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
| rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
| rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
| rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox |
| rollIn | rollOut | zoomIn | zoomInDown |
| zoomInLeft | zoomInRight | zoomInUp | zoomOut |
| zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp |
| slideInDown | slideInLeft | slideInRight | slideInUp |
| slideOutDown | slideOutLeft | slideOutRight | slideOutUp |
| heartBeat | |||
Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:
Задержка:
| Название класса | Время задержки |
|---|---|
| delay-2s | 2s |
| delay-3s | 3s |
| delay-4s | 4s |
| delay-5s | 5s |
Продолжительность:
| Название класса | Скорость |
|---|---|
| slow | 2s |
| slower | 3s |
| fast | 800ms |
| faster | 500ms |
Пример:
<div class="animated infinite bounce delay-5s slower">Пример</div>Пример
Если Вам нужно самостоятельно изменить время, задержку анимации, количество воспроизведений – добавьте такие стили:
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
Если Вы никогда не работали с применением css стилей для создания анимации, то обязательно примените данные обновления к Вашему ресурсу. Воспользуйтесь ещё одним методом привлечение внимания пользователей к вашему сайту.