Awesome Cross-Browser Animations with Animate.css

0

Animate.css is a wonderful thing to animate whatever you want in your project. It’s a bunch of cool, fun, and cross-browser animations for creating outstanding sliders, for emphasis, home pages, and general just for adding coolness to the modern web.

Awesome Cross-Browser Animations with Animate.css


Usage

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 names. That's it! You've got a CSS animated element.

You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft'); 

You can change the duration of your animations, add a delay or change the number of times that it plays!

#yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
}

Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o)


Effects:

Attention seekers

  • flash
  • bounce
  • shake
  • tada
  • swing
  • wobble
  • wiggle
  • pulse

Flippers

  • flip
  • flipInX
  • flipOutX
  • flipInY
  • flipOutY

Fading entrances

  • fadeIn
  • fadeInUp
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig

Fading exits

  • fadeOut
  • fadeOutUp
  • fadeOutDown
  • fadeOutLeft
  • fadeOutRight
  • fadeOutUpBig
  • fadeOutDownBig
  • fadeOutLeftBig
  • fadeOutRightBig

Bouncing entrances

  • bounceIn
  • bounceInDown
  • bounceInUp
  • bounceInLeft
  • bounceInRight

Bouncing exits

  • bounceOut
  • bounceOutDown
  • bounceOutUp
  • bounceOutLeft
  • bounceOutRight

Rotating entrances

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

Rotating exits

  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

Lightspeed

  • lightSpeedIn
  • lightSpeedOut


Specials

  • hinge
  • rollIn
  • rollOut

View Animate.css Demo
Download Animate.css

SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here