Анимация

Компонент Animation (коллекция плавных эффективных анимаций) предоставляет коллекцию эффективных анимаций для использования на веб-странице.

Применение

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

Класс Описание
.uk-animation-fade Эффект плавного появления/исчезновения.
.uk-animation-scale Анимация элемента - эффект «scale».
.uk-animation-scale-up Анимация элемента - эффект «scale-up».
.uk-animation-scale-down Анимация элемента - эффект «scale-down».
.uk-animation-slide-top Переход элемента с эффектом скольжения сверху.
.uk-animation-slide-bottom Переход элемента с эффектом скольжения снизу.
.uk-animation-slide-left Переход элемента с эффектом скольжения слева.
.uk-animation-slide-right Переход элемента с эффектом скольжения справа.
.uk-animation-shake Анимация элемента - эффект «shake».

Пример

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

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

Разметка

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

Модификатор «Реверс»

По умолчанию все анимации "прибывающие". Чтобы изменить действие анимации на обратное, добавьте класс .uk-animation-reverse.

Пример

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

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

Разметка

<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

Разметка

<div class="uk-animation-scale uk-animation-top-left">
    ...
</div>

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

Чтобы вызвать анимацию при наведении, добавьте класс .uk-animation-hover в сам анимированный элемент или в контейнер.

Пример

Fade
Shake

Разметка

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

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