Animation Styles

There are several styles of animation available; all use the following class structure:

(animated + [animation] + transition + speed)

For example, an animation that continually loops as it moves an element up into its final position will use this class structure:

class="animated infinite move-up-in transition-in xtra-slow"

Animation Tool

Choose animation settings from the drop downs below; once an option has been chosen for each of the settings, click the "Animate" button that will appear. To change the settings, simply choose another option in any of the drop downs and click the "Animate" button again.

animation...

dissolve-in dissolve-out scale-up-in scale-up-out scale-down-in scale-down-out move-up-in move-up-out move-down-in move-down-out move-left-in move-left-out move-right-in move-right-out pulse-in pulse-out pop-in pop-out spin-90 spin-180 spin-360 flash

forwards infinite

transition...

transition-in transition-out

speed...

fast medium slow xtra-slow

Animate

Pause / Play Copy Code