# motion-css The library of CSS3 animation ![GitHub file size in bytes](https://img.shields.io/github/size/pavlyukpetr/motion-css/motion.min.css?color=success&label=css%20file%20size) [![GitHub issues](https://img.shields.io/github/issues/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/issues) [![GitHub forks](https://img.shields.io/github/forks/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/network) [![GitHub stars](https://img.shields.io/github/stars/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/stargazers) [![GitHub license](https://img.shields.io/github/license/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/blob/master/LICENSE) [![Twitter](https://img.shields.io/twitter/url/https/github.com/pavlyukpetr/motion-css?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fpavlyukpetr%2Fmotion-css) Motion CSS is a library of animation for your web projects. It works very simply. All you need to do is connect the css file and use a specific class to an element that should be animated.

The complete list of classes, see here and here is some example. ## Install with NPM

npm install npm i motion-css-animation

After that you can import it into your style file with:

@import 'node_modules/motion-css-animation/main';

## USE

Connect stylesheet in <head> tag on your site:

<link rel="stylesheet" href="motion.min.css">

Add class "animation" to an element that should be animated. Now select the kind of animation for your item and add the appropriate class. The name of the animation is the class that you have to add. For example, I want to add animation appearance to the left. It is called "fade-in-left". Here's how it will look my element:

<div class="animation fade-in-left">...

As you may have guessed, I added a class="animation fade-in-left".

## ADDITIONAL FEATURES

If you want to delay the animation, use one of the classes:

"delay-05s" - 0.5 sec delay,
"delay-1s" - 1 sec delay,
"delay-1-5s" - 1.5 second delay,
"delay-2s" - 2 seconds delay,
"delay-3s" - 3 seconds delay

or add your own


.delay-Xs
{
    -webkit-animation-delay: Xs! important;

    animation-delay: Xs! important;
}

For endlessly repeating of animation use class "replay".

You can also combine this library with the jQuery, to fully control the animation on the site. For example, you can add the animation class to the element, when it appears in the visible area of the screen.

To do this, place the following code before the tag </body>:


<script>
	$ (window) .scroll (function () {
	$ ('#elementId'). each (function () {
	var elPosition = $ (this) .offset (). top; 	// Position of the element
	var elHeight = $ (this) .height (); 		// Height of the element
	var windowTop = $ (window) .scrollTop (); 	// Top of the window
	var windowHeight = $ (window) .height (); 	// Height of the window
	if (elPosition < windowTop + windowHeight - elHeight) {
		$ (This) .addClass ("animation fade-in");
	} 						                   // adds the class wheh the element is fully in the visible area of the window
	if (elPosition > windowTop + windowHeight) {
		$ (This) .removeClass ("animation fade-in");
	} 						                   // removes the class when the element is not visible in the window
	if (elPosition + elHeight < windowTop) {
		$ (This) .removeClass ("animation fade-in");
	} 						                   // removes the class when the element is not visible in the window
	});
	});
</script>

Instead #elementId enter the ID or class of your element. Also replace the class "fade-in" to your animation class.

Remember that for all kinds of entrance animation you need to add to your item id="animation" or css rule "visibility: hidden;". In turn, the class "animation" then makes your item is visible. Adding class "animation" necessarily to any animation, because it contains "animation-fill-mode: both", which prohibit return your item to its original position after the end of the animation.