Animations

These classes will animate any section, row, column, or module when the page loads. There are also some classes for animating on hover. 

Animation classes

  • animate-bounce
  • animate-flash
  • animate-pulse
  • animate-rubberBand
  • animate-shake
  • animate-headShake
  • animate-swing
  • animate-tada
  • animate-wobble
  • animate-jello
  • animate-bounceIn
  • animate-bounceInDown
  • animate-bounceInLeft
  • animate-bounceInRight
  • animate-bounceInUp
  • animate-lightSpeedIn
  • animate-hinge
  • animate-jackInTheBox
  • hover-rubberBand 
  • hover-pulse 
  • hover-tada
  • hover-grow 
  • hover-bounce 
  • hover-swing
  • hover-wobble 
  • hover-shake 
  • hover-headshake
  • hover-jello 
  • hover-flash

Additional Classes

  • infinite

Add this class to keep the animation looping continuously.  See an example of this in the bounce animation below.

 

Usage

Add any of the classes to Any Section, Row, or Module Settings > Advanced tab > CSS ID & Classes > CSS Class.

Use with

Any Section, Row, or Module

 

Design

Nothing to configure here.

Examples

Click on any button to see the animation in the photo below. You can see an example of using the infinite class to keep the animation loop continuously in the bounce animation. Below that are hover animations.

 

animate-rubberBand

animate-bounce infinite

 

animate-flash

animate-shake

animate-pulse

animate-jello

animate-wobble

animate-headShake

animate-swing

animate-tada

animate-bounceIn

animate-bounceInDown

animate-bounceInUp

animate-bounceInLeft

animate-bounceInRight

animate-lightSpeedIn

animate-jackInTheBox