Added Jelly Animation

Author: CGWebDev2003

neptune-animations.css

@@ -10,6 +10,11 @@
 /* Scaling Animations */
 @import url('./src/css/neptune_scale.css');
 
+/* 3D Animations */
+@import url('./src/css/neptune_3d.css');
+
+/* Other Animations */
+@import url('./src/css/neptune_other.css');
 
 :root {
 	--nep-animation-duration: 1s;

src/css/neptune_3d.css

@@ -0,0 +1,20 @@
+/* 3D Animations */
+/* Flip X */
+.nep-flip-x {
+	animation: nep-flip-x var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-flip-x {
+	50% { transform: rotateX(180deg);}
+	100% { transform: rotateX(180deg);}
+}
+
+/* Flip Y */
+.nep-flip-y {
+	animation: nep-flip-y var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-flip-y {
+	50% { transform: rotateY(180deg);}
+	100% { transform: rotateY(180deg);}
+}

src/css/neptune_other.css

@@ -0,0 +1,61 @@
+/* Some Other Animations */
+/* Pulse */
+.nep-pulse {
+	animation: nep-pulse var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-pulse {
+	35% { transform: scale(1.2);}
+	50% { transform: scale(1);}
+	85% { transform: scale(1.2);}
+	100% { transform: scale(1);}
+}
+
+/* Shake X */
+.nep-shake-x {
+	animation: nep-shake-x var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-shake-x {
+	12.5% { transform: translateX(1rem);}
+	/* 25% { transform: translateX(0);} */
+	37.5% { transform: translateX(-1rem);}
+	/* 50% { transform: translateX(0);} */
+	62.5% { transform: translateX(1rem);}
+	/* 75% { transform: translateX(0);} */
+	87.5% { transform: translateX(-1rem);}
+	100% { transform: translateX(0);}
+}
+
+/* Shake Y */
+.nep-shake-y {
+	animation: nep-shake-y var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-shake-y {
+	12.5% { transform: translateY(1rem);}
+	/* 25% { transform: translateY(0);} */
+	37.5% { transform: translateY(-1rem);}
+	/* 50% { transform: translateY(0);} */
+	62.5% { transform: translateY(1rem);}
+	/* 75% { transform: translateY(0);} */
+	87.5% { transform: translateY(-1rem);}
+	100% { transform: translateY(0);}
+}
+
+/* Jelly */
+.nep-jelly {
+	animation: nep-jelly var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
+}
+
+@keyframes nep-jelly {
+	20% {
+		transform: scale(1.3, .9);
+	}
+	50% {
+		transform: scale(.8, 1);
+	}
+	80% {
+		transform: scale(1.2, .8);
+	}
+}

test/index.html

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