Git Product home page Git Product logo

css3-animate-it's Introduction

#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

css3-animate-it's People

Contributors

jack-mccourt avatar pacmakaveli avatar iomdesign avatar michaelmackus avatar sarahbraun avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.