Movers.css - CSS-Animations library
movers.css is a collection of CSS based animations designed to make life easier! Please see below for a full list of current animations and a guide on how to use the library and add the animations to your own code.
How to use
There are three main ways to use the movers.css library:
- Install via NPM and add the link to the HTML head tags
- Clone the library and add the link the the HTML tags
- Copy the code from the library and insert directly into your project CSS file and HTML
Npm
Install the movers.css package via npm
npm install movers.css --save
Then link the movers.css file in the head of your HTML
<head>
<link href="node_modules/movers.css/movers.css" rel="stylesheet">
</head>Add the animation class to the element you wish to animate
<div class="helloWorldContainer fadeIn">
<p>Hello World</p>
</div>Clone
First clone the library from GitHub
git clone https://github.com/Kyle-Martin1/movers.css.git
Then link the movers.css file in the head of your HTML
<head>
<link href="../movers.css/movers.css" rel="stylesheet">
</head>Add the animation class to the element you wish to animate
<div class="helloWorldContainer fadeIn">
<p>Hello World</p>
</div>Copy
The other way to use any animation from the library is to copy the code into your CSS file such as in the example below:
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}Then add the animation class (e.g .fadeIn) to the element of the item you would like to animate.
Customisation
Each animation can be customised and tweaked by changing the CSS properties such as animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-fill-mode etc. You can also tweak colours, border-colours and anything else within your own stylesheet to truly customise your work.
Animations list
| Animations Class list | |
|---|---|
| Entry Animations | |
.fadeIn |
|
.enterTop |
|
.enterBottom |
|
.enterRight |
|
.enterLeft |
|
.rotateClockwise |
|
.rotateAntiClockwise |
|
.shrinkAndFadeIn |
|
.growAndFadeIn |
|
.flip |
|
.flipAlternate |
|
.hingeUpLeft |
|
.hingeUpRight |
|
.hingeDownRight |
|
.hingeDownLeft |
|
.enterTopLeft |
|
.enterTopRight |
|
.enterTottomLeft |
|
.enterBottomRight |
|
| Exit Animations | |
.exitTop |
|
.exitBottom |
|
.exitRight |
|
.exitLeft |
|
.fadeOut |
|
.giantFadeExit |
|
.shrinkExit |
|
.spinExit |
|
.spinShrinkExit |
|
| Special Animations | |
.shakeHorizontal |
|
.shakeVertical |
|
.madShake |
|
.swingRight |
|
.swingLeft |
|
.fontColorShift |
|
.bgColorShift |
|
.shapeShift1 |
|
.pendulum |
|
.rocking |
|
.spinRightLeft |
|
.rockLeft |
|
.rockRight |
|
.elastic1 |
|
.elastic2 |
|
.pulse |
|
.suprise |
|
.moveSquare |
|
.vibrate |
|
.focusLeft |
|
.focusRight |
|
.focusUp |
|
.focusDown |
|
.vanishAppear |