Declarative handling library for CSS animations

A little demo

Click Square Demo

If click, On Square, Do flipInY animation To Container Boxes,

<div class="demo-square demo1" data-anijs="if: click, do: flipInY, to: .container-box"></div>

Simple Stacking Animation

If focus, On name input Do wobble animation To paragraphs,

If animationend, On This paragraph Do hinge animation To pre tag below

<input id="name" type="text" data-anijs="if: focus, do: wobble, to: p">

Would you like to try it?

Animation setting up good!!!

If some event(click, scroll, mouseover), On any element (css selector), Do some behavior(Rotate animation), To (any element).

Read more about here.


Fork on GitHub Download as ZIP

Install the component using Bower

$ bower install anijs


Put the AniJS file on your page or use AMD. Also it can be loaded from the CDN.

<script src="anijs-min.js"></script>

Include the CSS animation styles definition, we strongly recomend you to use the amazing animate.css library as starting point, this library provides beautiful animations. Also, you can define your own animations.

    <!-- Animate.css library -->
    <link rel="stylesheet" href="">

Start playing by adding anijs-data tag to any HTML element.

    <header data-anijs="if: click, do: flipInY animated">
    <nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
    <div id="main" data-anijs="if: load, on: window, do: swing animated">
        if: load, on: window, do: swing animated
    <script src="bower_components/anijs/dist/anijs-min.js"></script>

See a Codepen Example.


Easy to use | Compact - around 7.7kb after gzipping | There is no need for third party libraries. | Speed of development. | Better integration between coders and designers.

“There is one more thing ...”

Work well in iPad, iPhone, Android and the modern browsers. ;)


Documentation Topics can be founded in the Wiki Pages.

Try AniJS Studio

AniJS Studio is a chrome extension that will allow you to create, test,
and add animations prototypes to any webpage, or web application easily.



For detailed changelog, check Releases.


AniJS is like a little girl, she needs hungry and foolish community people to grow up healthy. All your issues, pull requests and stars ;) are welcome.