AniJS - a library for declarative description of CSS animation

The other day I was engaged in creating a landing page with a decent set of animation that occurs during interaction with the page. I directly felt that there should be some cool library to solve the problem. And then I found AniJS , which completely conquered me!



In my opinion this is a great solution to describe the animation in the spirit of:

<divdata-anijs="if: click, do: flipInY, to: .container-box"></div>

Everything is as intuitive as possible: when you click on the specified div , we do flipInY animation on the .container-box element .

I also mention the possibility of creating an event queue, for example:

<divclass="element1"data-anijs="if: click, do: wobble, to: .element2">Нажми меня!</div><divclass="element2">Здесь будет Wobble!</div><divclass="element3"data-anijs="if: animationend, on: .element2, do: hinge">А потом я упаду</div>

That is, when you click on .element1 , the effect will be applied "potryasyvaniya» (wobble) for .element2 , on completion of which a .element3 will be applied loss effect of the lower border of the browser window.

In general, a lot of interesting things!
Those interested please read .