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
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 🥰🥰
It's easy to use, let's see step by step:
It's pretty straight forward:
npm install all-animationor
yarn add all-animationCurrently 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
<div id="animation"></div>
<button class="anny-class">Trigger class, go!</button>
$(".any-class").click(() =>{
$("#animation").addClass("a-journal");
});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);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:
- a-dance
- a-journal
- a-pulse
- a-pulse-slow
- a-jamp
- a-four-rock
- a-enter-up-bounce
- a-enter-down-bounce
- a-enter-right-bounce
- a-enter-left-bounce
- a-scale-bounce
- a-jump-bounce
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
- a-flip-top
- a-flip-left
- a-flip-right
- a-flip-bottom
- a-rotate-flip-down
- a-rotate-down-bounce
- a-rotate-out
- a-flash-bang
- a-bomb
- a-jello-horizontal
- a-jello-vertical
- a-vibrate-low
- a-vibrate-medium
- a-vibrate-high
- a-wobble-bottom
- a-wobble-left
- a-wobble-right
- a-wobble-top
If you want to contribute to our project, read the file: contributing.md 😊
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent