All Animation

All Animation.css is a set of nice and crazy css animations made with the purpose to bring life and interactions to your project. They are cross-browser animations which will give more emphases on your pages likes sliding controls and 3D efects...

You can view the website here -- We are going to change our layout soon

Translations

• Portuguese

V3 is now ready to be used!

It's already on npm, but we're still improving our documentation and api.

New modules will also be released on the future, the first one will be:

• [ ] all-animation/react 🥰🥰

How to use:

It's easy to use, let's see step by step:

Step 1, install the library as dependency

It's pretty straight forward:

npm install all-animation

or

yarn add all-animation

Step 2, link the library into your project:

Currently there's thwo ways of linking all animation into your project:

Via SCSS imports:

In your main scss file of your project, just include the all-animation module, like:

// main.scss
@import "../node_modules/all-animation/scss/main"

After that you should be ready to use our library.

Loading only specific animations

In case you don't want to have the whole all-animations on your final bundle, you can import the specific animation which you want together with core all-animation dependencies:

// Core all-animation dependencies, like variables and mixins
@import "../node_modules/all-animation/scss/config/_config";

// The specific animation which you want to use
// in this case "a-bomb"
@import "../node_modules/all-animation/scss/modules/bomb/bomb"

Link directly via CSS file you can also download the css file and put it before closing the </head> tag:

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

We also include the source maps of it, so you can have a better debugging visibility during development

Step 2, HTML:

<div id="animation"></div>

<button class="anny-class">Trigger class, go!</button>

Step 3, jQuery (You can also use plain javascript):

$(".any-class").click(() =>{
 $("#animation").addClass("a-journal");
});

Optional

If you want to add the effect at some specified time, just place a timer:

Example, triggering an animation in a particular element after 2 seconds:

setTimeout(() =>{
 $("#animation").addClass("a-journal");
}, 2000);

Caution:

If you want to add some animation on an element that had another animation, or you want to restart the animation previously triggered, you have to remove the last animation and trigger the new one. Example:

 $("#animation").removeClass("a-journal").addClass("a-four-rock");

We have several classes for animations:

Specials:

• a-dance
• a-journal
• a-pulse
• a-pulse-slow
• a-jamp
• a-four-rock

Bounce:

• a-enter-up-bounce
• a-enter-down-bounce
• a-enter-right-bounce
• a-enter-left-bounce
• a-scale-bounce
• a-jump-bounce

Perspective:

For using the perspective animations, please add a parent container with a class a-perspective, like:

<div class="a-perspective">
    <!-- Your animated code here, like: -->
    <div class="a-three-flip-up">...</div>
</div>

Some classes for

• a-three-flip-right
• a-three-flip-up
• a-three-flip-down
• a-flip-left-bounce
• a-rotate-flip
• a-flip-right-bounce

Fading Entrances:

• a-flip-top
• a-flip-left
• a-flip-right
• a-flip-bottom

Rotate:

• a-rotate-flip-down
• a-rotate-down-bounce
• a-rotate-out

Agrecives:

• a-flash-bang
• a-bomb

Jello

• a-jello-horizontal
• a-jello-vertical

Vibrate

• a-vibrate-low
• a-vibrate-medium
• a-vibrate-high

Wobble

• a-wobble-bottom
• a-wobble-left
• a-wobble-right
• a-wobble-top

Contributors:

If you want to contribute to our project, read the file: contributing.md 😊

Credits:

Clóvis Neto