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
Click on any of the boxes to see the animation.
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
Click on any of the boxes to see the animation.
Markup
<div class="uk-animation-fade uk-animation-reverse">...</div>Duration modifier
To stretch the animation duration to 10 seconds, add the .uk-animation-10 class.
Example
Markup
<div class="uk-animation-slide-right uk-animation-10">...</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
Click on any of the boxes to see the animation.
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
Markup
<div class="uk-animation-hover uk-animation-fade">...</div>
<div class="uk-animation-hover">
<div class="uk-animation-slide-right">...</div>
</div>