all-animation / All Animation
Projects that are alternatives of or similar to All Animation
All Animation
All animation.css is a set of fun animations to make your project sexier. They are cross-browser animations that will emphasize your pages with sliders, 3D effects, etc.
See the Portuguese language.
Contributors:
If you want to contribute to our project, read the file: contributing.md ;)
How to use:
It's easy to use, let's see step by step:
Step 1, include the necessary files in the head so the framework works correctly:
Download the All Animation: click here
and
<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
<script type="text/javascript" src="yourpath/jquery.js"></script>
or run
npm install all-animation
Step 2, HTML:
<div id="animation"></div>
<button class="anny-class">Trigger class, go!</button>
Step 3, jQuery:
$(".any-class").click(function(){
$("#animation").addClass("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(function(){
$("#animation").addClass("journal");
},2000);
Caution:
If you want to add some animation on an element that has 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("journal").addClass("four-rock");
We have several classes for animations:
Especiais:
- dance
- journal
- pulse
- pulse-slow
- jamp
- four-rock
Bounce:
- enter-up-bounce
- enter-down-bounce
- enter-right-bounce
- enter-left-bounce
- scale-bounce
- jump-bounce
Perspective:
- tree-flip-right
- tree-flip
- tree-flip-up
- tree-flip-down
- flip-left-bounce
- rotate-flip
- flip-right-bounce
Fading Entrances:
- flip-top
- flip-left
- flip-right
- flip-bottom
Rotate:
- rotate-flip-down
- rotate-down-bounce
- rotate-out
Agrecives:
- flash-bang
- bomba