AniJS – Declarative handling library for CSS animations

By Deepanker in CSS. Updated on June 24, 2014.

Want to create cool CSS animation effect? Try AniJS library crated by Dariel Noel. It is a declarative CSS library for animations. It is easy to use and performs good. You can easily integrate it with your existing code. It supports all modern desktop and mobile browsers.

Demo Download

Usage:

Usage of the library is easy. Like other libraries, it requires you to include the JS and CSS files of the library.

<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
<script src="anijs-min.js"></script>

Now you need to add anijs-data tag in HTML elements. in data-anijs tag, we usually write the animation effect and condition when to show that effect.

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

Deepanker

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

0 Comments

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.