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, and general just-add-water-awesomeness.

Page Demo Plugin Website

To use animate.css in your website, simply drop the stylesheet into your document's <head>, and add the class .animated to an element, along with any of the animation name given below.


Attention Seekers
bounce flash pulse rubberBand shake swing tada wobble jello
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 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>

Material Admin includes a 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).

Requirements:

  • /scss/inc/_mixins.scss
  • /vendors/animate.css/animate.min.css