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

\n\n

Usage

\n\n

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.

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassDescription
.uk-animation-fadeThe element fades in.
.uk-animation-scale-upThe element scales up.
.uk-animation-scale-downThe element scales down.
.uk-animation-slide-topThe element slides in from the top.
.uk-animation-slide-bottomThe element slides in from the bottom.
.uk-animation-slide-leftThe element slides in from the left.
.uk-animation-slide-rightThe element slides in from the right.
.uk-animation-shakeThe element shakes.
.uk-animation-scaleThe element scales down without fading in.
\n
\n\n

Example

\n\n

Click on any of the boxes to see the animation.

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

Markup

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

Reverse modifier

\n\n

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

\n\n

Example

\n\n

Click on any of the boxes to see the animation.

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

Markup

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

Duration modifier

\n\n

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

\n\n

Example

\n\n
\n
\n
Slide right
\n
\n
\n\n

Markup

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

Origin modifier

\n\n

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

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassDescription
.uk-animation-top-leftThe animation spreads from the top left.
.uk-animation-top-centerThe animation spreads from the top center.
.uk-animation-top-rightThe animation spreads from the top right.
.uk-animation-middle-leftThe animation spreads from the middle left.
.uk-animation-middle-rightThe animation spreads from the middle right.
.uk-animation-bottom-leftThe animation spreads from the bottom left.
.uk-animation-bottom-centerThe animation spreads from the bottom center.
.uk-animation-bottom-rightThe animation spreads from the bottom right.
\n
\n\n

Example

\n\n

Click on any of the boxes to see the animation.

\n\n
\n
\n
Top Left
\n
\n
\n
Top Center
\n
\n
\n
Top Right
\n
\n
\n
Middle Left
\n
\n
\n\n
\n
\n
Middle Right
\n
\n
\n
Bottom Left
\n
\n
\n
Bottom Center
\n
\n
\n
Bottom Right
\n
\n
\n\n
\n\n

Animation hover

\n\n

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

\n\n

Example

\n\n
\n
\n
Fade
\n
\n
\n
\n
Slide right
\n
\n
\n
\n\n

Markup

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