🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

CSS3 Animate It is a jQuery plugin that makes use of CSS3 animations to animate Html elements in when they come into view.

Rotate Flip fade Bounce pulse

Documentation

#CSS3-animate-it Just-add-water CSS animation

CSS3-animate-it is a bunch of cool, fun, and cross-browser animations for you to use in your projects.

##Usage To use CSS3-animate-it in your website, simply drop css3-animated.js at the end of your file and animations.css in the head.

<head>   <link rel="stylesheet" href="animations.css"> </head> <body> <script type="text/javascript" src="/js/css3-animate-it.js"></script> </body>

Once you have done that you can just define animatedParent as the parent class which is what will trigger the child class animated`` to animate whichever animation is defined, here we are using bounceInDown`.

You can do a whole bunch of other stuff with CSS3-animate-it.

##Sequencing

If you want to have a set of animations start one after the other then you can set a sequence time in ms using data-sequence then define the order with data-id.

<div class="animatedParent" data-sequence="500">   <h2 class="animated bounceInDown" data-id="1">It Works!</h2>   <h2 class="animated bounceInDown" data-id="2">This animation will start 500ms after</h2>   <h2 class="animated bounceInDown" data-id="3">This animation will start 500ms after</h2> </div>

And some more other stuff with CSS3-animate-it. for more go through these link http://jackonthe.net/css3animateit/

License

animations.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)

Contributing

Pull requests are the way to go here. I apologize in advance for the slow action on pull requests and issues.

CSS3-Animate-it by Jack Mccourt


You May Also Like