Added Scaling Animations

Author: CGWebDev2003

neptune-animations.css

@@ -7,6 +7,8 @@
 /* Rotate Animations */
 @import url(./src/css/neptune_rotate.css);
 
+/* Scaling Animations */
+@import url('./src/css/neptune_scale.css');
 
 
 :root {

src/css/neptune_scale.css

@@ -0,0 +1,24 @@
+/* Scale Up */
+.nep-scale-up {
+	animation: nep-scale-up var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-scale-up {
+	0% {
+		opacity: 0;
+		transform: scale(0.3);
+	}
+	30% { opacity: 1;}
+	98% { transform: scale(1.1);}
+	100% { transform: scale(1);}
+}
+
+/* Scale Down */
+.nep-scale-down {
+	animation: nep-scale-down var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-scale-down {
+	20% { transform: scale(1.3);}
+	100% { transform: scale(0);}
+}

test/index.html

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