Animation

A collection of smooth animations to use within your page.

Usage

Add one of the .uk-animation-* classes to any element. The animation is shown when the class is added, so usually immediately on page load. To show the animation at another point, for example when the element enters the viewport, you would add the class using JavaScript — with the Scrollspy component for instance. This is what happens in many of UIkit’s components that make use of animations. All animations themselves are implemented with CSS, so they do not require JavaScript to play.

ClassDescription
.uk-animation-fadeThe element fades in.
.uk-animation-scale-up
.uk-animation-scale-down
The element fades in and scales up or down.
.uk-animation-slide-top
.uk-animation-slide-bottom
.uk-animation-slide-left
.uk-animation-slide-right
The element fades and slides in from the top, bottom, left or right by its own height or width.
.uk-animation-slide-top-small
.uk-animation-slide-bottom-small
.uk-animation-slide-left-small
.uk-animation-slide-right-small
The element fades and slides in from the top, bottom, left or right with a smaller distance which is specified by a fixed pixel value.
.uk-animation-slide-top-medium
.uk-animation-slide-bottom-medium
.uk-animation-slide-left-medium
.uk-animation-slide-right-medium
The element fades and slides in from the top, bottom, left or right with a medium distance which is specified by a fixed pixel value.
.uk-animation-kenburnsThe element scales very slowly up without fading in.
.uk-animation-shakeThe element shakes.
.uk-animation-strokeThe SVG element strokes are drawn.

To toggle an animation on hover or focus, add the .uk-animation-toggle class to a parent element. Also add tabindex="0" to make the animation focusable through keyboard navigation and on touch devices.

<div class="uk-animation-toggle" tabindex="0">
  <div class="uk-animation-fade"></div>
</div>
Copy to clipboard
  • 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-grid-match uk-child-width-1-2" uk-grid>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-fade uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Fade</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-scale-up uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Scale Up</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-scale-down uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Scale Down</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-shake uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Shake</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-slide-left uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Left</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-slide-top uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Top</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-slide-bottom uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Bottom</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-animation-slide-right uk-background-muted uk-padding-small">
          <p class="uk-text-small uk-text-center">Right</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-left-small uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Left Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-top-small uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Top Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-bottom-small uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Bottom Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-right-small uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Right Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-left-medium uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Left Medium</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-top-medium uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Top Medium</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-bottom-medium uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Bottom Medium</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-right-medium uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Right Medium</p>
        </div>
      </div>
    </div>

Reverse modifier

By default, all animations are incoming. To reverse any animation, add the .uk-animation-reverse class.

<div class="uk-animation-fade uk-animation-reverse"></div>
Copy to clipboard
  • 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-grid-match uk-child-width-1-2" uk-grid>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-fade uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Fade</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-scale-up uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Scale Up</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-scale-down uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Scale Down</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-shake uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Shake</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-left uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Left</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-top uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Top</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-bottom uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Bottom</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-right uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Right</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-left-small uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Left Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-top-small uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Top Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-bottom-small uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Bottom Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-right-small uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Right Small</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-left-medium uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Left Medium</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-top-medium uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Top Medium</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-bottom-medium uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Bottom Medium</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-slide-right-medium uk-animation-reverse uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Right Medium</p>
        </div>
      </div>
    </div>

Fast modifier

To play animations at a faster speed, add the .uk-animation-fast class to the element.

<div class="uk-animation-fade uk-animation-fast"></div>
Copy to clipboard
  • Fade

  • <div class="uk-width-1-2">
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-fade uk-animation-fast uk-background-muted uk-padding-small"
        >
          <p class="uk-text-small uk-text-center">Fade</p>
        </div>
      </div>
    </div>

Origin modifiers

By default, scaling animations originate from the center. To modify this behavior, add one of the .uk-transform-origin-* classes from the Utility component.

<div class="uk-animation-scale-up uk-transform-origin-bottom-right"></div>
Copy to clipboard
  • 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-animation-scale-up uk-background-muted uk-padding-small uk-transform-origin-bottom-right"
        >
          <p class="uk-text-small uk-text-center">Bottom Right</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-scale-up uk-background-muted uk-padding-small uk-transform-origin-top-center"
        >
          <p class="uk-text-small uk-text-center">Top Center</p>
        </div>
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <div
          class="uk-animation-scale-up uk-background-muted uk-padding-small uk-transform-origin-bottom-center"
        >
          <p class="uk-text-small uk-text-center">Bottom Center</p>
        </div>
      </div>
    </div>

Ken Burns

To add a simple Ken Burns effect, add the .uk-animation-kenburns class to any image. You can also apply the .uk-animation-reverse or one of the .uk-transform-origin-* classes from the Utility component to modify the effect.

<img class="uk-animation-kenburns" src="" width="" height="" alt="" />

By default, the animation starts on page load. In this example we used the Scrollspy component, to toggle the effect when the image enters the view.

Copy to clipboard
  • 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="/images/dark.jpg"
            width="1800"
            height="1200"
            alt="Example image"
            uk-scrollspy="cls: uk-animation-kenburns; repeat: true"
          />
        </div>
      </div>
      <div>
        <div class="uk-overflow-hidden">
          <img
            src="/images/dark.jpg"
            width="1800"
            height="1200"
            alt="Example image"
            class="uk-animation-reverse uk-transform-origin-top-right"
            uk-scrollspy="cls: uk-animation-kenburns; repeat: true"
          />
        </div>
      </div>
    </div>

SVG Strokes

The Animation component can be used to animate SVG strokes. The effect looks like the SVG strokes are drawn before your eyes. The SVG image has to be injected into the markup as an inline SVG. This can be done manually or using the SVG component.

The following example shows how to add the inline SVG manually. Since you have to know the exact length of the stroke, UIkit requires you to set the length in the custom property --uk-animation-stroke. In this example the stroke length is 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>

A much easier way is to use the SVG component by adding uk-svg="stroke-animation: true" to the image element. It will calculate the stroke length and add the --uk-animation-stroke custom property automatically.

<img src="" width="" height="" alt="" uk-svg="stroke-animation: true" />
Copy to clipboard
  • <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"
          src="/images/strokes.svg"
          width="250"
          height="250"
          alt=""
          uk-svg="stroke-animation: true"
        />
      </div>
      <div class="uk-animation-toggle" tabindex="0">
        <img
          class="uk-animation-stroke uk-animation-reverse"
          src="/images/strokes.svg"
          width="250"
          height="250"
          alt=""
          uk-svg="stroke-animation: true"
        />
      </div>
    </div>
Customize