Animations

  • Created:
  • / Author: admin

In some of our most recent themes we provide animations that you can use to customize your website. These make content appear in a awesome manner while the user scrolls down the page.

Usage

Add “animated” class to element and data-fx=”animation-type”. That’s it.

  • data-fx=”hinge”
  • data-fx=”bounce”
  • data-fx=”flash”
  • data-fx=”pulse”
  • data-fx=”shake”
  • data-fx=”swing”
  • data-fx=”tada”
  • data-fx=”wobble”
  • data-fx=”bounceIn”
  • data-fx=”bounceInDown”
  • data-fx=”bounceInLeft”
  • data-fx=”bounceInRight”
  • data-fx=”bounceInUp”
  • data-fx=”bounceOut”
  • data-fx=”bounceOutDown”
  • data-fx=”bounceOutLeft”
  • data-fx=”bounceOutRight”
  • data-fx=”bounceOutUp”
  • data-fx=”fadeIn”
  • data-fx=”fadeInDown”
  • data-fx=”fadeInDownBig”
  • data-fx=”fadeInLeft”
  • data-fx=”fadeInLeftBig”
  • data-fx=”fadeInRight”
  • data-fx=”fadeInRightBig”
  • data-fx=”fadeInUp”
  • data-fx=”fadeInUpBig”
  • data-fx=”fadeOut”
  • data-fx=”fadeOutDown”
  • data-fx=”fadeOutDownBig”
  • data-fx=”fadeOutLeft”
  • data-fx=”fadeOutLeftBig”
  • data-fx=”fadeOutRight”
  • data-fx=”fadeOutRightBig”
  • data-fx=”fadeOutUp”
  • data-fx=”fadeOutUpBig”
  • data-fx=”flip”
  • data-fx=”flipInX”
  • data-fx=”flipInY”
  • data-fx=”flipOutX”
  • data-fx=”flipOutY”
  • data-fx=”lightSpeedIn”
  • data-fx=”lightSpeedOut”
  • data-fx=”rotateIn”
  • data-fx=”rotateInDownLeft”
  • data-fx=”rotateInDownRight”
  • data-fx=”rotateInUpLeft”
  • data-fx=”rotateInUpRight”
  • data-fx=”rotateOut”
  • data-fx=”rotateOutDownLeft”
  • data-fx=”rotateOutDownRight”
  • data-fx=”rotateOutUpLeft”
  • data-fx=”rotateOutUpRight”
  • data-fx=”slideInDown”
  • data-fx=”slideInLeft”
  • data-fx=”slideInRight”
  • data-fx=”slideOutLeft”
  • data-fx=”slideOutRight”
  • data-fx=”slideOutUp”
  • data-fx=”rollIn”
  • data-fx=”rollOut”

More information here: http://daneden.github.io/animate.css/