Usage of Animate.css. One of the finest CSS library for animations | 2my4edge

27 July 2015

Usage of Animate.css. One of the finest CSS library for animations

This is one the finest CSS library file to make you web page with attractive animated designs. it is cross browser library css file. it very easy to use in web page. it contains more Effects. We can use this library in our project make the page very neat and attractive. let see the details about the animate.css functions.

animate.css usage
DOWNLOAD                 ORIGINAL DEMO              2MY4EDGE DEMO

Animate.css is library file for CSS animations. it has some bulk of animations effects in the library file. We can easily use library file to out projects to make our project with some animation effect and attractive design. 

HOW TO USE IT

We have to link that CSS file in head tag
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Add the class animated to the element you want to animate. You may also want to include the class infinite for an infinite loop.

EFFECTS
  • 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
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

EXAMPLE CODE FOR INFINITE LOOP DESIGN
<h1 class="animated infinite fadeOutLeft">SAMPLE EXAMPLE</h1>
This will make infinite times same repeated animated effect. for that we are using that infinite class.

EXAMPLE CODE FOR DESIGN
<h1 class="animated fadeOutLeft">SAMPLE EXAMPLE</h1>

We can use this animated CSS with jquery also for that refer the VIDEO LINK 

I hope this post is really helpful to you. Keep visiting for more tutorials. 







RELATED POSTS :

1 comment:

  1. Can it also animate elements like graphic or icon?

    ReplyDelete

^