A transition is an animation usually used to move content in or out of view

Learn about Modules




An element can flash to draw attention to itself

$('.cat.image') .transition('flash') ;


An element can shake to draw attention to its position

$('.cat.image') .transition('shake') ;


An element can pulse to draw attention to its visibility

$('.cat.image') .transition('pulse') ;


An element can give user positive feedback for an action

$('.cat.image') .transition('tada') ;


An element can bounce to politely remind you of itself

$('.cat.image') .transition('bounce') ;



An element can flip into or out of view vertically or horizontally

$('.cat.image') .transition('horizontal flip') ;
$('.cat.image') .transition('vertical flip') ;


An element can fade into or out of view descending and ascending

$('.cat.image') .transition('fade') ;
$('.cat.image') .transition('fade up') ;
$('.cat.image') .transition('fade down') ;


An element can scale into or out of view

$('.cat.image') .transition('scale') ;


An element can appear to slide in from above or below

$('.cat.image') .transition('slide down') ;
$('.cat.image') .transition('slide up') ;


UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.

Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions


Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.



If a transition is called without any arguments all default settings will be used.

$('.dog.image') // default everything .transition() ;

Passing in settings

Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.

$('.dog.image') .transition({ animation : 'scale', duration : '2s', complete : function() { alert('done'); } }) ;

Display Type

Animations can be used on any display type not just block level elements. For example you can animate a button while preserving its inline-block status.

$('.test.button') .transition('horizontal flip', '500ms') ;

Queuing animations

Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.

$('.dog.image') .transition('horizontal flip', '500ms') .transition('horizontal flip', 500, function() { alert('done!'); }) ;


All the following behaviors can be called using the syntax:

$('.your.element') .dropdown('behavior name', argumentOne, argumentTwo) ;
Behavior Description
force repaint Forces reflow using a more expensive but stable method
repaint Triggers reflow on element
reset Resets all conditions changes during transition
looping Enables animation looping
remove looping Removes looping state from element
stop Stops current transition
start Restarts a stopped transition
toggle Toggles current transition on/off
set duration(duration) Modifies element animation duration
save conditions Saves all class names and styles to cache to be retrieved after animation
restore conditions Adds back cached names and styles to element
get animation name Returns vendor prefixed animation property for animationname
get animation event Returns vendor prefixed animation property for animationend
is visible Returns whether element is currently visible
is animating Returns whether transition is currently occurring
is looping Returns whether animation looping is set
is supported Returns whether animations are supported
is visible Returns whether element is visible


After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.

$('.kitten.image') .transition('scale') ;

Transition Direction

If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".

$('.kitten.image') // fade up out is used if available .transition('fade up') // this is now fade up in .transition('fade up') ;
$('.kitten.image') // if a direction if specified it will be obeyed .transition('horizontal flip in') .transition('vertical flip in') ;

Static Animations

Animations that do not have an in or out animation defined, will maintain their current visibility after running

$('.kitten.image') .transition('pulse') ;


Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle

$('.kitten.image') .transition('set looping') .transition('bounce', '2000ms') ;
$('.kitten.image') .transition('remove looping') ;

Transition Settings
Form settings modify the transition behavior

Setting Default Description
animation fade Named animation event to used. Must be defined in css.
duration 700ms Duration of the css transition animation
allowRepeats false If enabled will allow same animation to be queued while it is already occurring
queue true Whether to automatically queue animation if another is occurring

Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onShow transitioned element Callback on each transition that changes visibility to shown
onHide transitioned element Callback on each transition that changes visibility to hidden
complete transitioned element Callback on each transition complete

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace transition Event namespace. Makes sure module teardown does not effect other events attached to an element.
className : { animating : 'animating', disabled : 'disabled', hidden : 'hidden', inward : 'in', loading : 'loading', looping : 'looping', outward : 'out', transition : 'ui transition', visible : 'visible' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Transition Name used in debug logs
debug True Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
errors : { noAnimation : 'There is no css animation matching the one you specified.', method : 'The method you called is not defined' }