Компонент Анимация Animation

Потрясающая коллекция плавных CSS-анимаций для использования на веб-странице. Создание анимации. Эффект Кена Бернса. Применение. Модификаторы. Разметка. Готовые примеры.

Создание анимации

Добавьте один из классов .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-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

    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-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

    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="" 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="/demo/img/dark.jpg" 
                 width="900" height="600" alt="Демо изображение" loading="lazy" 
                 uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
        </div>
    </div>
    <div>
        <div class="uk-overflow-hidden">
            <img src="/demo/img/dark.jpg" 
                 width="900" height="600" alt="Демо изображение" loading="lazy" 
                 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">
  • SVG изображение
    SVG изображение 
  • <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="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="/demo/img/strokes.svg" alt="SVG изображение" uk-svg="stroke-animation: true">
    </div>
</div>