Neptune Animations

Use the animation library to make animations with JavaScript and CSS even easier.

Install

Using NPM

To install Neptune Animations as a NPM package, run the following commands:

npm i neptunecss-animations

Now import Neptune Animations.

yourOwn.css

@import url('/path/to/your/neptune-animations.min.css');

yourOwn.js

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:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.css">

Put this one at the end of the body.

<script src="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.js"></script>

Example

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@latest/neptune.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.css">

		<title>Neptune Animations Example Page</title>
	</head>
	<body>
		<!-- Your Content -->

		<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.js">
	</body>
</html>

Usage

Customization

You can customize the following variables in 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

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.

PreviousPlugins NextVS Code Snippets

Last updated 2 years ago