Animations – Help Center

Animations can be applied to any element by simply adding a class name to an element. To have the animation play when the element appears within view, use the data-animation attribute.

If you would like the animation to play on a loop, add the infinite class name.

Attention seekers#

Bounce

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat felis, tincidunt vel sollicitudin at, fermentum id purus. Curabitur sodales, odio sed elementum sodales, ipsum dolor dignissim ex, ac elementum nisi enim sed neque.

Flash

Head shake

Jello

Pulse

Rubber band

Shake

Swing

Tada

Wobble

Bouncing#

Bounce in

Bounce in down

Bounce in left

Bounce in right

Bounce in up

Fading#

Fade in

Fade in down

Fade in down (big)

Fade in left

Fade in left (big)

Fade in right

Fade in right (big)

Fade in up

Fade in up (big)

Flipping#

Flip

Flip in X

Flip in Y

Rotating#

Rotate in

Rotate in down left

Rotate in down right

Rotate in up left

Rotate in up right

Sliding#

Slide in down

Slide in left

Slide in right

Slide in up

Specials#

Lightspeed in

Roll in

Zooming#

Zoom in

Zoom in down

Zoom in left

Zoom in right

Zoom in up

Hover#

Bob

Buzz

Buzz out

Hang

Pop

Pulse

Pulse grow

Pulse shrink

Push

Wobble bottom

Wobble horizontal

Wobble skew

Wobble to bottom right

Wobble to top right

Wobble top

Wobble vertical