Анимация
Основная коллекция плавных анимационных эффектов, для использования на вашей странице.
Использование
Для установки этого компонента, добавить любой .uk-animation-*
класс к элементу, и он будет исчезать с приятной анимацией. Эти классы обычно устанавливается с помощью JavaScript чтобы применить анимацию к определенному поведению.
Класс | Описание |
---|---|
.uk-animation-fade |
Элемент исчезает. |
.uk-animation-scale-up |
Элемент масштабируется на увеличение. |
.uk-animation-scale-down |
Элемент масштабируется на уменьшение. |
.uk-animation-slide-top |
Элемент скольжения сверху. |
.uk-animation-slide-bottom |
Элемент скольжения снизу. |
.uk-animation-slide-left |
Элемент скольжения слева. |
.uk-animation-slide-right |
Элемент скольжения справа. |
.uk-animation-shake |
Элемент трясти. |
.uk-animation-scale |
Стихия весов вниз без выцветания. |
Пример
Наведите курсор на любой из блоков, чтобы увидеть анимацию.
Разметка
<div class="uk-animation-fade">...</div>
Обратный модификатор
По умолчанию, все анимации являются входящие. Отмените любые анимации, добавив .uk-animation-reverse
класс.
Пример
Наведите курсор на любой из блоков, чтобы увидеть анимацию.
Разметка
<div class="uk-animation-fade uk-animation-reverse">...</div>
Модификатор Продолжительность
Чтобы растянуть анимацию длительностью до 15 секунд, добавить .uk-animation-15
класс.
Пример
Разметка
<div class="uk-animation-slide-right uk-animation-15">...</div>
Модификатор Происхождение
По умолчанию масштабирование анимации исходят из центра. Чтобы изменить это поведение, добавьте один из этих классов.
Класс | Описание |
---|---|
.uk-animation-top-left |
Анимация распространяется от левого верхнего угла. |
.uk-animation-top-center |
Анимация распространяется от центра верхней части. |
.uk-animation-top-right |
Анимация распространяется от верхней правой. |
.uk-animation-middle-left |
Анимация распространяется от середины влево. |
.uk-animation-middle-right |
Анимация распространяется от середины вправо. |
.uk-animation-bottom-left |
Анимация распространяется снизу слева. |
.uk-animation-bottom-center |
Анимация распространяется от центра нижней части. |
.uk-animation-bottom-right |
Анимация распространяется снизу справа. |
Пример
Наведите курсор на любой из блоков, чтобы увидеть анимацию.
Анимация наведение
Для запуска анимации на наведение, просто добавьте .uk-animation-hover
класс для анимированного элемента или контейнера.
Пример
Разметка
<div class="uk-animation-hover uk-animation-fade">...</div>
<div class="uk-animation-hover">
<div class="uk-animation-slide-right">...</div>
</div>