Transition
Create smooth transitions between two states when hovering an element.
FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind
down. It will continue to work, but using the latest version is recommended
for new projects so you can benefit from future updates and enhancements.
Table of contents
Usage
To toggle a transition on hover or focus, add the .uk-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 .uk-transition-* classes to any child element to apply the actual effect.
| Class | Description |
|---|---|
.uk-transition-fade | Lets the element fade in |
.uk-transition-scale-up.uk-transition-scale-down | The element scales up or down. |
.uk-transition-slide-top.uk-transition-slide-bottom.uk-transition-slide-left.uk-transition-slide-right | Lets the element slide in from the top |
.uk-transition-slide-top-sm.uk-transition-slide-bottom-sm.uk-transition-slide-left-sm.uk-transition-slide-right-sm | The element slides in from the top, bottom, left or right with a smaller distance. |
.uk-transition-slide-top-md.uk-transition-slide-bottom-md.uk-transition-slide-left-md.uk-transition-slide-right-md | The element slides in from the top, bottom, left or right with a medium distance. |
