[su_animate type="bounceIn" duration="1"]Animated content[/su_animate]
This shortcode allows animating almost everything.
Option name | Possible values | Default 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 20 | 1 |
delay Animation delay (seconds) | Number from 0 to 20 | 0 |
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 no | no |
class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |