CSS Animations

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders.

Page Demo Plugin Website

Select an animation category from the dropdown below to reveal the available animation names.

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

Usage

You can use these animation with either CSS classes or SCSS mixin.

Add classes animated and the animation name (one of above mentioned) to the element you want to animate. You may also want to include the class infinite for an infinite loop.

<!-- Basic -->
<div class="animated zoomIn">
   ...
</div>

<!-- Infinite -->
<div class="animated zoomIn infinite">
   ...
</div>

Super Admin 2.0 includes a custom SCSS mixin which may help you when defining animations on CSS property level. This mixin requires 2 parameters: animation-name and animation-duration

.box {
   @include animated(fadeIn, 500ms);
}

Likewise, you can include any of the above given animation name with a duration in either second (s) or millisecond (ms).

Files required:
Type Files
SCSS Mixins /src/scss/inc/_mixins.scss
Library /resources/vendors/animate.css/animate.min.css