Animations

Trigger animations to elements when they become visible.

Fade in up 

<div class="bg-faded p-4 rounded" data-animate="fadeInUp">
  Fade in up
</div>

Data options

data-animate="EFFECT" to the element you want to animate.

data-animate-delay="TIME" Time in seconds or milliseconds to add a delay.

data-animate-duration="TIME" Time in seconds or milliseconds to set the duration of the effect (default is 1 second).

data-animate-infinite="true" To run the animation in a loop.


Example:
Run again
Hello world, how are you!? 

<span data-animate="fadeIn">Hello</span>
<span data-animate="fadeIn" data-animate-delay=".4">World,</span>
<span data-animate="fadeIn" data-animate-delay=".9">how</span>
<span data-animate="fadeIn" data-animate-delay="1.4">are</span>
<span data-animate="fadeIn" data-animate-delay="1.8">you!?</span>

Effects

You can see them in action here.

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeInScale
  • fadeInScaleDown
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp