Компонент Анимация
Потрясающая коллекция плавных CSS-анимаций для использования на веб-странице. Создание анимации. Эффект Кена Бернса. Применение. Модификаторы. Разметка. Готовые примеры.
Animation: Создание анимации
Добавьте один из классов .uk-animation-* к любому элементу.
Анимация сработает при добавлении класса, обычно это сразу при загрузке страницы.
Чтобы показать анимацию в определенное время, например, когда элемент входит в область просмотра страницы,
вы должны добавить класс с использованием JavaScript - например, применить компонент Scrollspy.
Компонент Scrollspy используется во многих компонентах UIkit 3, которые используют анимацию.
Все анимации UIkit 3 реализованы с помощью 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 |
Элемент качает, колбасит, трясет. |
.uk-animation-stroke |
Анимации штрихов SVG. Рисует штрихи (strokes) элемента SVG. |
Чтобы запустить анимацию при наведении или фокусе, добавьте в родительский элемент класс .uk-animation-toggle.
Также добавьте tabindex="0", чтобы сделать анимацию фокусируемой с помощью клавиатуры и сенсорных устройств.
<div class="uk-animation-toggle" tabindex="0">
<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-child-width-1-3@l uk-child-width-1-4@xl uk-grid-match" uk-grid>
<div class="uk-animation-toggle" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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-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-child-width-1-3@l uk-child-width-1-4@xl uk-grid-match" uk-grid>
<div class="uk-animation-toggle" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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-child-width-1-1 uk-child-width-1-3@s" uk-grid>
<div class="uk-animation-toggle" tabindex="0">
<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 class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-fast uk-animation-slide-bottom">
<p class="uk-text-center">Bottom</p>
</div>
</div>
<div class="uk-animation-toggle" tabindex="0">
<div class="uk-card uk-card-default uk-card-body uk-animation-fast uk-animation-slide-right">
<p class="uk-text-center">Right</p>
</div>
</div>
</div>Модификатор «ИсточникЪ»
По умолчанию масштабирование анимации происходит из центра. Чтобы изменить это поведение и установить координаты точки,
относительно которой будет происходить трансформация элемента, добавьте один из классов .uk-transform-origin-*
из компонента с дополнениями - Утилиты : Точка трансформации.
<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" tabindex="0">
<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" tabindex="0">
<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" tabindex="0">
<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>Эффект «Ken Burns»
Чтобы добавить эффект Кена Бернса, добавьте к любому изображению класс .uk-animation-kenburns.
Чтобы изменить эффект и установить анимацию в противоположном направлении,
вы можете использовать класс .uk-animation-reverse, а для того чтобы установить координаты точки
один из классов .uk-transform-origin-* из компонента Утилиты : Точка трансформации.
<img class="uk-animation-kenburns" src="" width="" height="" 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.webp"
width="900" height="600" loading="lazy" alt="Демо изображение"
uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
</div>
</div>
<div>
<div class="uk-overflow-hidden">
<img src="images/dark.webp"
width="900" height="600" loading="lazy" alt="Демо изображение"
class="uk-animation-reverse uk-transform-origin-top-right"
uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
</div>
</div>
</div>SVG Strokes
Анимация штрихов SVG
Компонент Анимация можно использовать для анимации штрихов SVG. Эффект выглядит так, будто штрихи SVG рисуются прямо на ваших глазах. Изображение SVG должно быть размещено в разметке как встроенный SVG. Это можно сделать вручную или с помощью компонента Изображения SVG.
В следующем примере показано, как добавить встроенный SVG вручную. Поскольку вы должны знать точную длину обводки,
UIkit требует, чтобы вы установили длину в пользовательском свойстве --uk-animation-stroke. В этом примере длина обводки составляет 46.
<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="stroke-animation: true" к элементу изображения.
Он самостоятельно рассчитает длину обводки и автоматически добавит пользовательское свойство --uk-animation-stroke.
<img src="" width="" height="" uk-svg="stroke-animation: 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" loading="lazy" alt="SVG изображение" 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" loading="lazy" alt="SVG изображение" uk-svg="stroke-animation: true">
</div>
</div>