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 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>
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.
REFERENCE https://github.com/daneden/animate.css/
RELATED POSTS :
Can it also animate elements like graphic or icon?
ReplyDelete