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 .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. |
Support
Franken UI is an independent project free for everyone. Help support it and
expand its component library.