Animate
animate.js
is a tiny library that helps you write smooth CSS-powered animations in JavaScript. See a quick demo of 500 elements animating at playground.deaxon.com/js/animate.
Usage
Include animate.min.js
in your page:
<script src=animate.min.js></script>
Start animating things:
animate({ el: "div", translateX: 100, opacity: .5, duration: 500, complete: function() { alert("Done!") } });
API
animate
requires a config object accepting the following options:
el
The elements you want to animate. el
can be a:
- CSS selector
- DOM element
- array of DOM elements
- NodeList or HTMLCollection
duration
[Optional] The duration of your animation in milliseconds. Default: 400. ms
will be added if you don't specify a unit.
delay
[Optional] The delay before your animation starts in milliseconds. Default: 0. ms
will be added if you don't specify a unit.
easing
[Optional] The animation curve (CSS keyword or cubic-bezier). Default: ease.
complete
[Optional] A function called at the end of the animation. Inside the function, this
refers to the DOM element that has finished animating.
animatable properties
- opacity
- translateX
- translateY
- translateZ
- scaleX
- scaleY
- scaleZ
- rotateX
- rotateY
- rotateZ
- skewX
- skewY
- perspective
You can also use the shortcut transform functions translate
, scale
and rotate
when the same value should be applied to X and Y:
translate: 100 // same as translateX: 100, translateY: 100
If you don't specify a unit, px
will be added to translate
-related and perspective
functions and deg
to rotate
-related functions.