# Transition
## Usage
To toggle a transition on hover or focus, add the `.z-transition-toggle` class to a parent element. Also add `tabindex="0"` to make the animation focusable through keyboard navigation and on touch devices. Add one of the `.z-transition-*` classes to any child element to apply the actual effect.
| Class | Description |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| `.z-transition-fade` | Lets the element fade in |
| `.z-transition-scale-up`
`.z-transition-scale-down` | The element scales up or down. |
| `.z-transition-slide-top`
`.z-transition-slide-bottom`
`.z-transition-slide-left`
`.z-transition-slide-right` | Lets the element slide in from the top |
| `.z-transition-slide-top-small`
`.z-transition-slide-bottom-small`
`.z-transition-slide-left-small`
`.z-transition-slide-right-small` | The element slides in from the top, bottom, left or right with a smaller distance. |
| `.z-transition-slide-top-medium`
`.z-transition-slide-bottom-medium`
`.z-transition-slide-left-medium`
`.z-transition-slide-right-medium` | The element slides in from the top, bottom, left or right with a medium distance. |
```html
```
```html
```
