Коллекция плавных анимаций для использования на ваших страницах.
Как использовать анимацию в UIkit 3
Добавьте один из классов семейства .uk-animation-* к любому элементу.
Анимация отображается при добавлении класса и срабатывает при загрузке страницы.
Чтобы анимировать элементы в другое время, например, когда элемент появляется в область просмотра, используйте классы для JavaScript.
Анимация в различных состояниях поддерживается компонентами Scrollspy, Toggle, Switcher и т. д.
Для использования отложенных анимаций с задержкой и дополнителными параметрами, можно использовать сторонние библиотеки, например, WOW.js.
Все анимации реализованы с помощью CSS, поэтому для их воспроизведения не требуется 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-slide-top-small.uk-animation-slide-bottom-small .uk-animation-slide-left-small.uk-animation-slide-right-small |
Элемент исчезает и двигается вверх, вниз, влево или вправо с меньшим расстоянием, которое определяется фиксированным значением в пикселях. |
.uk-animation-slide-top-medium.uk-animation-slide-bottom-medium .uk-animation-slide-left-medium.uk-animation-slide-right-medium |
Элемент исчезает и двигается двигается вверх, вниз, влево или вправо со средним расстоянием, которое определяется фиксированным значением пикселях. |
.uk-animation-kenburns |
Элемент очень медленно масштабируется, но не исчезает. |
.uk-animation-shake |
Элемент качается. |
<div class="uk-animation-toggle">
<div class="uk-animation-fade"></div>
</div>
Fade
Scale Up
Scale Down
Shake
<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-grid-match" uk-grid> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-fade"> <p class="uk-text-center">Fade</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up"> <p class="uk-text-center">Scale Up</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down"> <p class="uk-text-center">Scale Down</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-shake"> <p class="uk-text-center">Shake</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left"> <p class="uk-text-center">Left</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top"> <p class="uk-text-center">Top</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom"> <p class="uk-text-center">Bottom</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right"> <p class="uk-text-center">Right</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small"> <p class="uk-text-center">Left Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small"> <p class="uk-text-center">Top Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small"> <p class="uk-text-center">Bottom Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small"> <p class="uk-text-center">Right Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium"> <p class="uk-text-center">Left Medium</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium"> <p class="uk-text-center">Top Medium</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium"> <p class="uk-text-center">Bottom Medium</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium"> <p class="uk-text-center">Right Medium</p> </div> </div> </div>
Чтобы применить анимацию при наведении, добавьте класс .uk-animation-toggle нужному элементу. После этого анимация будет срабатывать в момент наведения курсора на элемент.
Модификаторы реверсивной анимациии
По умолчанию все анимации двигаются вперед. Чтобы отменить анимацию и повернуть ее вспять добавьте класс .uk-animation-reverse к своему элементу.
<div class="uk-animation-fade uk-animation-reverse"></div>
Fade
Scale Up
Scale Down
Shake
<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-grid-match" uk-grid> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse"> <p class="uk-text-center">Fade</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse"> <p class="uk-text-center">Scale Up</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse"> <p class="uk-text-center">Scale Down</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse"> <p class="uk-text-center">Shake</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse"> <p class="uk-text-center">Left</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse"> <p class="uk-text-center">Top</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse"> <p class="uk-text-center">Bottom</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse"> <p class="uk-text-center">Right</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse"> <p class="uk-text-center">Left Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse"> <p class="uk-text-center">Top Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse"> <p class="uk-text-center">Bottom Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse"> <p class="uk-text-center">Right Small</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse"> <p class="uk-text-center">Left Medium</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse"> <p class="uk-text-center">Top Medium</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse"> <p class="uk-text-center">Bottom Medium</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse"> <p class="uk-text-center">Right Medium</p> </div> </div> </div>
Модификатор ускорения
Чтобы воспроизводить анимацию на более высокой скорости, добавьте класс .uk-animation-fast к элементу.
<div class="uk-animation-fade uk-animation-fast"></div>
Fade
<div class="uk-width-1-3@s"> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-fast uk-animation-fade"> <p class="uk-text-center">Fade</p> </div> </div> </div>
Модификаторы точки начала анимации
По умолчанию масштабирование анимации происходит из центра. Чтобы изменить данный параметр, добавьте один из классов семейства .uk-transform-origin-*
из компонента Utility.
<div class="uk-animation-scale-up uk-transform-origin-bottom-right"></div>
Bottom Right
Top Center
Bottom Center
<div class="uk-child-width-1-3@s" uk-grid> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-bottom-right"> <p class="uk-text-center">Bottom Right</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-top-center"> <p class="uk-text-center">Top Center</p> </div> </div> <div class="uk-animation-toggle"> <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-bottom-center"> <p class="uk-text-center">Bottom Center</p> </div> </div> </div>
Эффект Кена Бернса
Чтобы добавить простой эффект Кена Бернса, добавьте класс .uk-animation-kenburns любому изображению.
Также можно реверсировать аниацию с помощью .uk-animation-reverse и установить любую точку начала анимации с помощью класса .uk-transform-origin-*
из компонента Утилиты для настройки эффекта.
<img class="uk-animation-kenburns" src="" alt="">
По умолчанию анимация запускается при загрузке страницы. В этом примере мы использовали компонент Scrollspy, чтобы анимация отрабатывала в тот момент, когда вы смотрите на анимированный элемент.
<div class="uk-child-width-1-2@s uk-grid-small" uk-grid> <div> <div class="uk-overflow-hidden"> <img src="images/dark.jpg" alt="Example image" uk-scrollspy="cls: uk-animation-kenburns; repeat: true"> </div> </div> <div> <div class="uk-overflow-hidden"> <img src="images/dark.jpg" alt="Example image" class="uk-animation-reverse uk-transform-origin-top-right" uk-scrollspy="cls: uk-animation-kenburns; repeat: true"> </div> </div> </div>
SVG анимация штрихов
Компонент Анимация легко использовать для анимации штрихов SVG. Эффект выглядит так, словно кто-то рисует штрихи SVG на ваших глазах. Изображение SVG должно быть введено в разметку как встроенный (инлайновый) SVG. Это можно сделать вручную или с помощью компонента SVG.
<svg class="uk-animation-stroke" style="--uk-animation-stroke: 46;" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#000" stroke-width="1" d=""/>
</svg>Гораздо проще использовать SVG-компонент, если добавить uk-svg = "animation-stroke: true" к элементу изображения.
Он рассчитает длину штриха и автоматически добавит пользовательское свойство --uk-animation-stroke.
<img src="/" uk-svg="animation-stroke: true">-
<div class="uk-child-width-1-2@m uk-text-center" uk-grid> <div class="uk-animation-toggle" tabindex="0"> <img class="uk-animation-stroke" width="400" height="400" src="images/strokes.svg" alt="" uk-svg="stroke-animation: true"> </div> <div class="uk-animation-toggle" tabindex="0"> <img class="uk-animation-stroke uk-animation-reverse" width="400" height="400" src="images/strokes.svg" alt="" uk-svg="stroke-animation: true"> </div> </div>