README
Easy Css Animate v1.2.0
What is
This is a simple and noob css library to make fast animations.
New Features
v1.2.0
Reverse all animations
Fix a bug that caused rotation animations to not work without some direction
Less css code
How to Install
npm i --save easy-css-animate
How works
The classes works independently of each others, you can combinates and make do you want.
Positions
You can positionate your element where you want to activate animations later:
<div class="top">Top</div>
<div class="bottom">Bottom</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="top left">Top at Left</div>
<div class="bottom right">Bottom at Right</div>
Fades
<div class="fade-out">fade-out</div>
<div class="fade-in">fade-in</div>
Slides
<div class="slide top">Slide Top</div>
<div class="slide bottom">Slide Bottom</div>
<div class="slide left">Slide Left</div>
<div class="slide right">Slide Right</div>
<div class="slide left bottom">Slide Left at bottom</div>
<div class="slide right top">Slide Right at top</div>
<div class="slide-hover right">Slide Hover Right</div>
Zoom
<div class="zoom-in">Zoom In</div>
<div class="zoom-out">Zoom Out</div>
<div class="zoom-in-hover">Zoom In with Hover</div>
<div class="zoom-out-hover">Zoom Out with Hover</div>
Rotate
<div class="rotate-x">Rotate 360deg X</div>
<div class="rotate-y">Rotate 360deg Y</div>
<div class="spin">Spin 360deg Z</div>
<div class="spin-reverse">Spin -360deg Z (to left)</div>
<div class="spin-window">Spin -180deg Z (window effect)</div>
<div class="rotate-xy">Rotate 360deg X & Y</div>
<div class="rotate-xz">Rotate 360deg X & Z</div>
<div class="rotate-yz">Rotate 360deg Y & Z</div>
<div class="rotate-xyz">Rotate 360deg X & Y & Z</div>
Circle Fill
<div class="fill top">fill Top</div>
<div class="fill bottom">fill Bottom</div>
<div class="fill left top">fill Left Top</div>
<div class="fill right bottom">fill Right Bottom</div>
Timing
There are like 30 classes for the duration of the animation or transition and other 30 for the delay to run (by default everything is 1 second)
<div class="fade-in t-0_1s">Fade with 0.1s duration</div>
<div class="fade-in t-0_2s">Fade with 0.2s duration</div>
<div class="fade-in t-0_3s">Fade with 0.3s duration</div>
...
<div class="fade-in t-0_9s">Fade with 0.9s duration</div>
<div class="fade-in t-1s">Fade with 1s duration</div>
<div class="fade-in t-1_1s">Fade with 1.1s duration</div>
<div class="fade-in t-1_2s">Fade with 1.2s duration</div>
...
<div class="fade-in t-1_9s">Fade with 1.9s duration</div>
<div class="fade-in t-2s">Fade with 2s duration</div>
<div class="fade-in t-2_1s">Fade with 2.1s duration</div>
<div class="fade-in t-2_2s">Fade with 2.2s duration</div>
<div class="fade-in t-2_3s">Fade with 2.3s duration</div>
...
<div class="fade-in t-3s">Fade with 3s duration</div>
And the animation delay
Fade with 0.1s delay
Fade with 0.1s delay
Fade with 0.1s delay
...
Fade with 0.9s delay
Fade with 1s delay
Fade with 1.1s delay
Fade with 1.2s delay
...
Fade with 1.9s delay
Fade with 2s delay
Fade with 2.1s delay
Fade with 2.2s delay
Fade with 2.3s delay
...
Fade with 3s
Timing Functions
There are the classics timing functions and a special effect.
<div class="fade-in t-2_3s ease">Ease Effect</div>
<div class="slide right ease-in">Ease-In Effect</div>
<div class="fade-in ease-out">Ease-Out Effect</div>
<div class="zoom-in d-0_2s ease-in-out">Ease-In-Out Effect</div>
<div class="fade-in t-0_4s linear">Linear Effect</div>
<div class="slide top bounce">Bounce Effect</div>
Gallery Slider
<div class="gallery-slider">
<div class="inner">
<the elements that you want>
<tested with images only lol>
</div>
</div>
Misc
<div class="fade-in infinite">Infinite Animation</div>
<div class="fade-in reverse>Reverse Animation</div>
<div class="slide right alternate">Alternate Animation</div>
<div class="fade-in inf-alt">Infinite & Alternate Animation</div>
Please Enjoy, report any issue and pull request if you want to get better the library Have a nice day
defaultuser001