Skip to content
CSS3 Animate-it
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Change translateX to translateY Jun 25, 2015
example-assets updating title Jun 27, 2014
js $(window).load calls jquery.fn.load Aug 15, 2016
less fade Sep 1, 2014
.gitignore readme file updated Jan 9, 2015
README.md
css3-animate-it.jquery.json fixing small example page error Nov 16, 2014
examples.php adding in new animations Jul 15, 2014
index.php fixing small example page error Nov 16, 2014
package.json

README.md

#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 can’t perform that action at this time.