# 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>