All Animation CSS3

Get Started

It’s really easy to use our library, so for making the initialization process easier to undestand, we have separated made this tutorial bellow, step by step.

Basic usage

Step 1

Include the necessary files in the head , so that the framework work properly:

<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />

Step 2

To add the animation you can enter there by JavaScrip dynamically or statically placed there by html:

<div class="a-dance"> 
    Trigger Class...
</div>

Event based animations

Step 3 - Optional

The usage of javascript is optional, we just demonstrate here in order to let you know how to trigger an animation after certain user action:

Using jQuery:

$("button").click((e) => {
    e.preventDefault();
    $("div").addClass('a-dance');
});

Using plain javascript:

button.addEventListener('click', (e) => {
    e.preventDefault();

    div.classList.add('a-dance');
})