Just-add-water Web Animations
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
This is a porting to Web Animation API of the fabulous animate.css project.
What is Web Animations API?
Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.
With the Web Animations API, we no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction.
Web Animations API features is available by default in Firefox 48+ and Chrome 36+. For other browsers there’s a handy maintained polyfill that tests for feature support and adds it where necessary.
The polyfill and Animatelo are supported on modern versions of all major browsers, including:
- Firefox 27+
- IE10+ (including Edge)
- Safari (iOS) 7.1+
- Safari (Mac) 9+
To install via Bower, simply do the following:
$ bower install animatelo --save
or you can install via npm:
$ npm install animatelo --save
Here's a simple example of an animation that flip a text in a
Try it as a live demo.
<!-- Include the polyfill --> <script src="//cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"></script> <!-- Include Animatelo --> <script src="//cdn.rawgit.com/gibbok/animatelo/1.0.0/dist/animatelo.min.js"></script> <!-- Set up a target to animate --> <h1 id="hello">Hello world!</h1> <!-- Animate! --> <script> window.animatelo.flip('#hello'); </script>
Advanced Usage Documentation
More information and technical documentation on Animatelo can be found at Usage page.
Animatelo is licensed under the MIT license.