Transition
Create smooth transitions between two states when hovering an element.
Table of contents
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. |
<div class="z-transition-toggle" tabindex="0">
<div class="z-transition-fade"></div>
</div>
