Transition

Create smooth transitions between two states when hovering an element.

Table of contents

• Usage

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-small .uk-transition-slide-bottom-small .uk-transition-slide-left-small .uk-transition-slide-right-small	The element slides in from the top, bottom, left or right with a smaller distance.
.uk-transition-slide-top-medium .uk-transition-slide-bottom-medium .uk-transition-slide-left-medium .uk-transition-slide-right-medium	The element slides in from the top, bottom, left or right with a medium distance.