Shortcodes: Animations

Available Animations

.scaleAppear

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="scaleAppear" data-delay="150">...</div>

.fadeInLeft

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInLeft" data-delay="150">...</div>

.fadeInUp

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInUp" data-delay="150">...</div>

.fadeInRight

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInRight" data-delay="150">...</div>

.fadeInDown

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInDown" data-delay="150">...</div>

.fadeIn

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeIn" data-delay="150">...</div>

.slideRight

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="slideRight" data-delay="150">...</div>

.slideUp

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="slideUp" data-delay="150">...</div>

.slideLeft

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="slideLeft" data-delay="150">...</div>

.expandUp

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="expandUp" data-delay="150">...</div>

.slideExpandUp

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="slideExpandUp" data-delay="150">...</div>

.expandOpen

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="expandOpen" data-delay="150">...</div>

.bigEntrance

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="bigEntrance" data-delay="150">...</div>

.hatch

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="hatch" data-delay="150">...</div>

.tossing

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="tossing" data-delay="150">...</div>

.pulse

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="pulse" data-delay="150">...</div>

.floating

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="floating" data-delay="150">...</div>

.bounce

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="bounce" data-delay="150">...</div>

.pullUp

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="pullUp" data-delay="150">...</div>

.pullDown

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="pullDown" data-delay="150">...</div>

.stretchLeft

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="stretchLeft" data-delay="150">...</div>

.stretchRight

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="stretchRight" data-delay="150">...</div>

.fadeInUpBig

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInUpBig" data-delay="150">...</div>

.fadeInDownBig

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInDownBig" data-delay="150">...</div>

.fadeInLeftBig

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInLeftBig" data-delay="150">...</div>

.fadeInRightBig

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="fadeInRightBig" data-delay="150">...</div>

.slideInDown

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="slideInDown" data-delay="150">...</div>

.slideInLeft

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="slideInLeft" data-delay="150">...</div>

.slideInRight

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="slideInRight" data-delay="150">...</div>

.moveFromLeft

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-12 animate" data-animation="moveFromLeft" data-delay="150">...</div>

.moveFromRight

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-6 animate" data-animation="moveFromRight" data-delay="150">...</div>

.moveFromBottom

Just add class "animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

<div class="col-md-6 animate" data-animation="moveFromBottom" data-delay="150">...</div>

Twitter

Our Contacts

  • 3112 Stonecoal Road Toledo, OH 43602

  • canis@support.com
  • 0 (800) 321 654

  • Working hours: 9.00 - 20.00

Newsletter

Subscribe to our Newsletter to be updated, we promise not to spam.