easy-css-animate v1.2.0

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

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