Animation

Animated content
[su_animate type="bounceIn" duration="1"]Animated content[/su_animate]

Description

This shortcode allows animating almost everything.

Options

Option namePossible valuesDefault value
type
Select animation type
flash (flash)
bounce (bounce)
shake (shake)
tada (tada)
swing (swing)
wobble (wobble)
pulse (pulse)
flip (flip)
flipInX (flipInX)
flipOutX (flipOutX)
flipInY (flipInY)
flipOutY (flipOutY)
fadeIn (fadeIn)
fadeInUp (fadeInUp)
fadeInDown (fadeInDown)
fadeInLeft (fadeInLeft)
fadeInRight (fadeInRight)
fadeInUpBig (fadeInUpBig)
fadeInDownBig (fadeInDownBig)
fadeInLeftBig (fadeInLeftBig)
fadeInRightBig (fadeInRightBig)
fadeOut (fadeOut)
fadeOutUp (fadeOutUp)
fadeOutDown (fadeOutDown)
fadeOutLeft (fadeOutLeft)
fadeOutRight (fadeOutRight)
fadeOutUpBig (fadeOutUpBig)
fadeOutDownBig (fadeOutDownBig)
fadeOutLeftBig (fadeOutLeftBig)
fadeOutRightBig (fadeOutRightBig)
slideInDown (slideInDown)
slideInLeft (slideInLeft)
slideInRight (slideInRight)
slideOutUp (slideOutUp)
slideOutLeft (slideOutLeft)
slideOutRight (slideOutRight)
bounceIn (bounceIn)
bounceInDown (bounceInDown)
bounceInUp (bounceInUp)
bounceInLeft (bounceInLeft)
bounceInRight (bounceInRight)
bounceOut (bounceOut)
bounceOutDown (bounceOutDown)
bounceOutUp (bounceOutUp)
bounceOutLeft (bounceOutLeft)
bounceOutRight (bounceOutRight)
rotateIn (rotateIn)
rotateInDownLeft (rotateInDownLeft)
rotateInDownRight (rotateInDownRight)
rotateInUpLeft (rotateInUpLeft)
rotateInUpRight (rotateInUpRight)
rotateOut (rotateOut)
rotateOutDownLeft (rotateOutDownLeft)
rotateOutDownRight (rotateOutDownRight)
rotateOutUpLeft (rotateOutUpLeft)
rotateOutUpRight (rotateOutUpRight)
lightSpeedIn (lightSpeedIn)
lightSpeedOut (lightSpeedOut)
hinge (hinge)
rollIn (rollIn)
rollOut (rollOut)
bounceIn
duration
Animation duration (seconds)
Number from 0 to 201
delay
Animation delay (seconds)
Number from 0 to 200
inline
This parameter determines what HTML tag will be used for animation wrapper. Turn this option to YES and animated element will be wrapped in SPAN instead of DIV. Useful for inline animations, like buttons
yes or nono
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –
Helpful?
🤝 Thank you!