Github
NPM
BlogTwitterInstagram

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.

PreviousPluginsNextVS Code Snippets

Last updated