Компонент Анимация : 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

    Left

    Top

    Bottom

    Right

    Left Small

    Top Small

    Bottom Small

    Right Small

    Left Medium

    Top Medium

    Bottom Medium

    Right Medium

  • <div class="uk-child-width-1-2 uk-child-width-1-4@s 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

    Left

    Top

    Bottom

    Right

    Left Small

    Top Small

    Bottom Small

    Right Small

    Left Medium

    Top Medium

    Bottom Medium

    Right Medium

  • <div class="uk-child-width-1-2 uk-child-width-1-4@s 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

    Bottom

    Right

  • <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="" alt="">

По умолчанию анимация запускается при загрузке страницы. В этом примере используется компонент Scrollspy, чтобы переключать эффект, когда изображение входит в облать просмотра.

  • Example image
    Example image
  • <div class="uk-child-width-1-2@s uk-grid-small" uk-grid>
        <div>
            <div class="uk-overflow-hidden">
                <img src="demo/img/dark.jpg" alt="Example image" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
            </div>
        </div>
        <div>
            <div class="uk-overflow-hidden">
                <img src="demo/img/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 Strokes

Компонент Анимация можно использовать для анимации штрихов SVG. Эффект выглядит так, будто штрихи SVG рисуются прямо на ваших глазах. Изображение SVG должно быть размещено в разметке как встроенный SVG. Это можно сделать вручную или с помощью компонента Изображения SVG.

В следующем примере показано, как добавить встроенный SVG вручную. Поскольку вы должны знать точную длину обводки, UIkit 3 требует, чтобы вы установили длину в пользовательском свойстве --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="" 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="demo/img/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="demo/img/strokes.svg" alt="" uk-svg="stroke-animation: true">
        </div>
    </div>

Документация
Компоненты