Rotating Entrance Animations

[raw]

The [animate] shortcode lets you animate any page element you like. Use them to spice up your pages and get really creative! Below are the “Rotating entrances” class of animations – don’t forget to also check out the Attention seekers, Fading entrances, Fading exits, Bouncing entrances, Bouncing exits, Rotating exits, Lightspeed and Specials types as well. Feel free to reload this page if you’d like to see the animations again.

[spacer height=”5px”]
[one_third]
[animate animation=”rotateIn” delay=”1s” duration=”1s” iterations=”1″][button]rotateIn[/button][/animate][/one_third]
[one_third]
[animate animation=”rotateInDownLeft” delay=”2s” duration=”1s” iterations=”1″][button]rotateInDownLeft[/button][/animate]
[/one_third]

[one_third_last]

[animate animation=”rotateInDownRight” delay=”2.5s” duration=”1s” iterations=”1″][button]rotateInDownRight[/button][/animate]

[/one_third_last]

[one_third]
[animate animation=”rotateInUpLeft” delay=”3s” duration=”1s” iterations=”1″]
[button]rotateInUpLeft[/button][/animate]
[/one_third]

[one_third]
[animate animation=”rotateInUpRight” delay=”3.5s” duration=”1s” iterations=”1″]
[button]rotateInUpRight[/button][/animate]
[/one_third]

[one_third_last]
[/one_third_last]
[spacer height=”23px”]
[divider]
[spacer height=”24px”]
[/raw]

[raw]

Get The Code

[spacer height=”4px”]

[codebox line_numbers=”true” remove_breaks=”true” lang=”html”]
[[animate animation=”rotateIn” delay=”0″ duration=”2s” iterations=”1″]
Animated content goes here…
[/animate]]

[[animate animation=”rotateInDownLeft” delay=”0″ duration=”2s” iterations=”1″]
Animated content goes here…
[/animate]]

[[animate animation=”rotateInDownRight” delay=”0″ duration=”2s” iterations=”1″]
Animated content goes here…
[/animate]]
[/codebox]
[spacer height=”23px”]
[divider]

[spacer height=”24px”]
[/raw]
[raw]

Customization Options

[list]
[list_item]animation – the type of animation you want to use[/list_item]
[list_item]duration – how long you want the animation to last[/list_item]
[list_item]delay – how long you want to wait after the page is loaded before kicking off the animation[/list_item]
[list_item]iterations – the number of times you want the animation to run[/list_item]
[/list]
[/raw]