Animations

The [animate] shortcode lets you animate any page element you like. It uses animate.css — a bunch of cool, fun, and cross-browser animations:
[space]

Attention seekers

[one_fourth] [animate animation=”flash” delay=”0″ duration=”2s” iterations=”20″][button size=”huge” href=”#flash”]Flash[/button][/animate] [/one_fourth] [one_fourth] [animate animation=”bounce” delay=”1s” duration=”2s” iterations=”20″][button size=”huge” href=”#bounce”]Bounce[/button][/animate] [/one_fourth] [one_fourth] [animate animation=”shake” delay=”2s” duration=”2s” iterations=”20″][button size=”huge” href=”#shake”]Shake[/button][/animate] [/one_fourth] [one_fourth_last] [animate animation=”tada” delay=”3s” duration=”2s” iterations=”20″][button size=”huge” href=”#tada”]Tada[/button][/animate] [/one_fourth_last] [space]

Code

[animate animation="flash" delay="0" duration="2s" iterations="20"][button size="huge" href="#flash"]Flash[/button][/animate]
[animate animation="bounce" delay="1s" duration="2s" iterations="20"][button size="huge" href="#bounce"]Bounce[/button][/animate]
[animate animation="shake" delay="2s" duration="2s" iterations="20"][button size="huge" href="#shake"]Shake[/button][/animate]
[animate animation="tada" delay="3s" duration="2s" iterations="20"][button size="huge" href="#tada"]Tada[/button][/animate]

[space]

Flippers, Fading, Bouncing

[one_fourth] [animate animation=”flip” delay=”0s” duration=”2s” iterations=”20″][button size=”huge” href=”#swing”]Flip[/button][/animate] [/one_fourth] [one_fourth] [animate animation=”fadeIn” delay=”1s” duration=”2s” iterations=”20″][button size=”huge” href=”#wobble”]Fade In[/button][/animate] [/one_fourth] [one_fourth] [animate animation=”bounceIn” delay=”2s” duration=”2s” iterations=”20″][button size=”huge” href=”#wiggle”]Bounce In[/button][/animate] [/one_fourth] [one_fourth_last] [animate animation=”rotateIn” delay=”3s” duration=”2s” iterations=”20″][button size=”huge” href=”#pulse”]Rotate In[/button][/animate] [/one_fourth_last] [space]

Code

[animate animation="flip" delay="0" duration="2s" iterations="20"][button size="huge" href="#swing"]Flip[/button][/animate]
[animate animation="fadeIn" delay="1s" duration="2s" iterations="20"][button size="huge" href="#wobble"]Fade In[/button][/animate]
[animate animation="bounceIn" delay="2s" duration="2s" iterations="20"][button size="huge" href="#wiggle"]Bounce In[/button][/animate]
[animate animation="rotateIn" delay="3s" duration="2s" iterations="20"][button size="huge" href="#pulse"]Rotate In[/button][/animate]

For more examples, see Animate.css Site.