animate
Use CSS3 animations easily with Javascript. Library inspired by move.js
Installation
$ npm install animatejs
or to use directly in the browser:
$ bower install animatejs
This library is written in ES6, checkout Gruntfile.js
for an example on how to build it, or just use a tool like 6to5 to compile to ES5 and use it in node.
An already built version is included in dist/
directory. If loaded in a browser it will set an animate
global variable.
example
// animate().query(selector) being a long version for animate(selector).// You can define keyframes using .kf before or after matching elements// since they are not related to the DOM element you attach but to the document.// Every time you call this method it will override previous matched elements// assign the 'keyframe-0' animation to '.random-class'// and make it last 2 iterations of 1 second long each.// Just assignment, doesn't play yet// do something on each iteration// ok! now let's play the assigned animations in '.random-class'// do something once animation ends.// The argument is the same instance we were using,// so you can chain other animations on the same element// do something once both animations ended
docs
// initializes animate, you can optionally pass it a selector// to start assigning animations to the attached element right away {} // do something on events like 'AnimationIteration' or 'AnimationStart'.// You shouldn't use 'AnimationEnd', use `play().then` instead. {} // remove event listener {} // assign a keyframe, refer to example {} {} {} // assign animation properties into attached element.// Each argument must be a string or an animation object (refer to example) {} // attach a DOM element, this method is called on init. {} // reset animations on attached elements {} // generate a new clean CSS sheet where to hold keyframes and calls .reset() {} // pause current animation {} // resume previously paused animation // play assigned animations.// Returns a promise that resolves once all assigned animations ended