Skip to content
Simple animation library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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


Include animate.min.js in your page:

<script src=animate.min.js></script>

Start animating things:

  el: "div",
  translateX: 100,
  opacity: .5,
  duration: 500,
  complete: function() { alert("Done!") }


animate requires a config object accepting the following options:


The elements you want to animate. el can be a:

  • CSS selector
  • DOM element
  • array of DOM elements
  • NodeList or HTMLCollection


[Optional] The duration of your animation in milliseconds. Default: 400. ms will be added if you don't specify a unit.


[Optional] The delay before your animation starts in milliseconds. Default: 0. ms will be added if you don't specify a unit.


[Optional] The animation curve (CSS keyword or cubic-bezier). Default: ease.


[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.

You can’t perform that action at this time.