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 por 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 15 seconds, add the .uk-animation-15
class.
Example
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
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>