Animation

A basic collection of smooth animations to use within your page.

Usage

To apply this component, add any .uk-animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Class Description
.uk-animation-fade The element fades in.
.uk-animation-scale-up The element scales up.
.uk-animation-scale-down The element scales down.
.uk-animation-slide-top The element slides in from the top.
.uk-animation-slide-bottom The element slides in from the bottom.
.uk-animation-slide-left The element slides in from the left.
.uk-animation-slide-right The element slides in from the right.
.uk-animation-shake The element shakes.
.uk-animation-scale The element scales down without fading in.

Example

Hover over any of the boxes to see the animation.

Fade
Scale up
Scale down
Shake
Slide top
Slide bottom
Slide left
Slide right
Scale

Markup

<div class="uk-animation-fade">...</div>

Reverse modifier

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

Example

Hover over any of the boxes to see the animation.

Fade
Scale up
Scale down
Shake
Slide top
Slide bottom
Slide left
Slide right
Scale

Markup

<div class="uk-animation-fade uk-animation-reverse">...</div>

Duration modifier

To stretch the animation duration to 15 seconds, add the .uk-animation-15 class.

Example

Slide right

Markup

<div class="uk-animation-slide-right uk-animation-15">...</div>

Origin modifier

By default, scaling animations originate from the center. To modify this behavior, add one of these classes.

Class Description
.uk-animation-top-left The animation spreads from the top left.
.uk-animation-top-center The animation spreads from the top center.
.uk-animation-top-right The animation spreads from the top right.
.uk-animation-middle-left The animation spreads from the middle left.
.uk-animation-middle-right The animation spreads from the middle right.
.uk-animation-bottom-left The animation spreads from the bottom left.
.uk-animation-bottom-center The animation spreads from the bottom center.
.uk-animation-bottom-right The animation spreads from the bottom right.

Example

Hover over any of the boxes to see the animation.

Top Left
Top Center
Top Right
Middle Left
Middle Right
Bottom Left
Bottom Center
Bottom Right

Animation hover

To trigger an animation on hover, just add the .uk-animation-hover class to the animated element itself or to a container.

Example

Fade
Slide right

Markup

<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>