Added full rotation animation

Author: CGWebDev2003

neptune-animations.css

@@ -1,27 +1,11 @@
 
 
 /* Fading Animations */
-@import url('./src/css/fade/neptune_fade_in.css');
-@import url('./src/css/fade/neptune_fade_out.css');
+@import url('./src/css/neptune_fade_in.css');
+@import url('./src/css/neptune_fade_out.css');
 
 /* Rotate Animations */
-/* Rotate Right */
-.nep-rotate-right {
-	animation: nep-rotate-right var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
-}
-
-@keyframes nep-rotate-right {
-	100% { transform: rotate(360deg);}
-}
-
-/* Rotate Left */
-.nep-rotate-left {
-	animation: nep-rotate-left var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
-}
-
-@keyframes nep-rotate-left {
-	100% { transform: rotate(-360deg);}
-}
+@import url(./src/css/neptune_rotate.css);
 
 
 

src/css/fade/neptune_fade_in.css renamed to src/css/neptune_fade_in.css

@@ -0,0 +1,77 @@
+/* Rotate Right */
+.nep-rotate-right {
+	animation: nep-rotate-right var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-rotate-right {
+	100% { transform: rotate(360deg);}
+}
+
+/* Rotate Right In*/
+.nep-rotate-right-in {
+	animation: nep-rotate-right-in var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-rotate-right-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+		transform: rotate(360deg);
+	}
+}
+
+/* Rotate Right Out*/
+.nep-rotate-right-out {
+	animation: nep-rotate-right-out var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-rotate-right-out {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+		transform: rotate(360deg);
+	}
+}
+
+/* Rotate Left */
+.nep-rotate-left {
+	animation: nep-rotate-left var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-rotate-left {
+	100% { transform: rotate(-360deg);}
+}
+
+/* Rotate Left In*/
+.nep-rotate-left-in {
+	animation: nep-rotate-left-in var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-rotate-left-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+		transform: rotate(-360deg);
+	}
+}
+
+/* Rotate Left Out*/
+.nep-rotate-left-out {
+	animation: nep-rotate-left-out var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-rotate-left-out {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+		transform: rotate(-360deg);
+	}
+}

src/css/fade/neptune_fade_out.css renamed to src/css/neptune_fade_out.css

@@ -16,7 +16,7 @@
 		import NeptuneAnimate from "../neptune-animations.js"
 
 		const myElement = document.getElementById("test");
-		const neptuneAnimate = new NeptuneAnimate(myElement, "nep-fade-out-right");
+		const neptuneAnimate = new NeptuneAnimate(myElement, "nep-rotate-left-in");
 
 		neptuneAnimate.startAnimation();
 	</script>