# Animation
## Usage
Add one of the `.z-animation-*` classes to any element. The animation is shown when the class is added, so usually immediately on page load. To show the animation at another point, for example when the element enters the viewport, you would add the class using JavaScript — with the [Scrollspy component](/docs/latest/kit/scrollspy) for instance. This is what happens in many of UIkit's components that make use of animations. All animations themselves are implemented with CSS, so they do not require JavaScript to play.
| Class | Description |
| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `.z-animation-fade` | The element fades in. |
| `.z-animation-scale-up` `.z-animation-scale-down` | The element fades in and scales up or down. |
| `.z-animation-slide-top` `.z-animation-slide-bottom` `.z-animation-slide-left` `.z-animation-slide-right` | The element fades and slides in from the top, bottom, left or right by its own height or width. |
| `.z-animation-slide-top-small` `.z-animation-slide-bottom-small` `.z-animation-slide-left-small` `.z-animation-slide-right-small` | The element fades and slides in from the top, bottom, left or right with a smaller distance which is specified by a fixed pixel value. |
| `.z-animation-slide-top-medium` `.z-animation-slide-bottom-medium` `.z-animation-slide-left-medium` `.z-animation-slide-right-medium` | The element fades and slides in from the top, bottom, left or right with a medium distance which is specified by a fixed pixel value. |
| `.z-animation-kenburns` | The element scales very slowly up without fading in. |
| `.z-animation-shake` | The element shakes. |
| `.z-animation-stroke` | The SVG element strokes are drawn. |
To toggle an animation on hover or focus, add the `.z-animation-toggle` class to a parent element. Also add `tab to make the animation focusable through keyboard navigation and on touch devices.
```html
```
```html
Fade
Scale Up
Scale Down
Shake
Left
Top
Bottom
Right
Left Small
Top Small
Bottom Small
Right Small
Left Medium
Top Medium
Bottom Medium
Right Medium
```
## Reverse modifier
By default, all animations are incoming. To reverse any animation, add the `.z-animation-reverse` class.
```html
```
```html
Fade
Scale Up
Scale Down
Shake
Left
Top
Bottom
Right
Left Small
Top Small
Bottom Small
Right Small
Left Medium
Top Medium
Bottom Medium
Right Medium
```
## Fast modifier
To play animations at a faster speed, add the `.z-animation-fast` class to the element.
```html
```
```html
Fade
```
## Origin modifiers
By default, scaling animations originate from the center. To modify this behavior, add one of the `.z-transform-origin-*` classes.
```html
```
```html
Bottom Right
Top Center
Bottom Center
```
## Ken Burns
To add a simple Ken Burns effect, add the `.z-animation-kenburns` class to any image. You can also apply the `.z-animation-reverse` or one of the `.z-transform-origin-*` classes to modify the effect.
```html
```
By default, the animation starts on page load. In this example we used the [Scrollspy](/docs/latest/kit/scrollspy) component, to toggle the effect when the image enters the view.
```html
```
## SVG Strokes
The Animation component can be used to animate SVG strokes. The effect looks like the SVG strokes are drawn before your eyes. The SVG image has to be injected into the markup as an inline SVG. This can be done manually or using the [SVG component](/docs/latest/kit/svg).
The following example shows how to add the inline SVG manually. Since you have to know the exact length of the stroke, UIkit requires you to set the length in the custom property `--z-animation-stroke`. In this example the stroke length is `46`.
```html
```
A much easier way is to use the [SVG component](/docs/latest/kit/svg) by adding `z-svg="stroke-animation: true"` to the image element. It will calculate the stroke length and add the `--z-animation-stroke` custom property automatically.
```html
```
```html
