# Neptune Animations
## Install
### Using NPM
To install Neptune Animations as a [NPM package](https://www.npmjs.com/package/neptunecss-animations), run the following commands:
```bash
npm i neptunecss-animations
```
Now import Neptune Animations.
#### yourOwn.css
```css
@import url('/path/to/your/neptune-animations.min.css');
```
#### yourOwn.js
```javascript
import NeptuneAnimate from "/path/to/your/neptune-animations.min.js"
```
### Using CDN
To use Neptune Animations with CDN Link, put this line of code in your header:
```css
```
Put this one at the end of the body.
```markup
```
#### Example
```html
Neptune Animations Example Page
```
## Usage
### Customization
You can customize the following variables in CSS:
```css
--nep-animation-duration: .5s; /* Deafault is 1s */
--nep-animation-delay: .5s; /* Default is 0s */
--nep-animation-direction: linear; /* Default is null */
--nep-animation-fillmode: infinite; /* Default is forwards */
```
### Setup Animation
```javascript
const myElement = document.getElementById("yourElement");
const neptuneAnimate = new NeptuneAnimate(myElement, "nep-pulse");
neptuneAnimate.startAnimation();
```
### Animation Classes
Fading Animations
#### Fading In
* `nep-fade-in`
* `nep-fade-in-down`
* `nep-fade-in-right`
* `nep-fade-in-up`
* `nep-fade-in-left`
#### Fading Out
* `nep-fade-out`
* `nep-fade-out-down`
* `nep-fade-out-right`
* `nep-fade-out-up`
* `nep-fade-out-left`
Scaling Animations
* `nep-scale-up`
* `nep-scale-down`
Rotation Animations
#### Right
* `nep-rotate-right`
* `nep-rotate-right-in`
* `nep-rotate-left-out`
#### Left
* `nep-rotate-left`
* `nep-rotate-left-in`
* `nep-rotate-left-out`
3D Animations
* `nep-flip-x`
* `nep-flip-y`
Some Other Animations
* `nep-pulse`
* `nep-shake-x`
* `nep-shake-y`
* `nep-jelly`
## Examples
You can test the Neptune Animations in the [Animations Showcase](https://colingrahm.net/NeptuneAnimations).
