Анимация

Основная коллекция плавных анимационных эффектов, для использования на вашей странице.

Использование

Для установки этого компонента, добавить любой .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 Стихия весов вниз без выцветания.

Пример

Наведите курсор на любой из блоков, чтобы увидеть анимацию.

Fade
Scale up
Scale down
Shake
Slide top
Slide bottom
Slide left
Slide right
Scale

Разметка

<div class="uk-animation-fade">...</div>

Обратный модификатор

По умолчанию, все анимации являются входящие. Отмените любые анимации, добавив .uk-animation-reverse класс.

Пример

Наведите курсор на любой из блоков, чтобы увидеть анимацию.

Fade
Scale up
Scale down
Shake
Slide top
Slide bottom
Slide left
Slide right
Scale

Разметка

<div class="uk-animation-fade uk-animation-reverse">...</div>

Модификатор Продолжительность

Чтобы растянуть анимацию длительностью до 15 секунд, добавить .uk-animation-15 класс.

Пример

Slide right

Разметка

<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 Анимация распространяется снизу справа.

Пример

Наведите курсор на любой из блоков, чтобы увидеть анимацию.

Top Left
Top Center
Top Right
Middle Left
Middle Right
Bottom Left
Bottom Center
Bottom Right

Анимация наведение

Для запуска анимации на наведение, просто добавьте .uk-animation-hover класс для анимированного элемента или контейнера.

Пример

Fade
Slide right

Разметка

<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>