Neptunecss-animations NPM

Neptune Animations

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">

And this one at the bottom of yout 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@ Example Page/neptune.min.js"></script>
	   	<script src="https://cdn.jsdelivr.net/npm/neptunecss-animations@ latest/neptune-animations.min.js"></script>
	</body>
</html>

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 */

To learn more read the Docs.