New feature :- Add _animations.css with new animations

scss/_animations.scss

@@ -0,0 +1,186 @@
+/* Basic Animations */
+
+/* 1. Fade-in animation */
+@keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .animation-fade-in {
+    animation: fadeIn 0.5s ease;
+  }
+
+  /* 2. Slide-up animation */
+  @keyframes slideUp {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  .-animation-slide-up {
+    animation: slideUp 0.5s ease;
+  }
+
+  /* 3. Bounce animation */
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-20px);
+    }
+    60% {
+      transform: translateY(-10px);
+    }
+  }
+
+  .animation-bounce {
+    animation: bounce 0.8s ease;
+  }
+
+  /* 4. Rotate animation */
+  @keyframes rotate {
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .animation-rotate {
+    animation: rotate 1s linear infinite;
+  }
+/* Some Advanced Animation */
+
+/* 5. HeartBeat Animation */
+ @keyframes heartbeat {
+
+     0%,
+     100% {
+         transform: scale(1);
+     }
+
+     50% {
+         transform: scale(1.3);
+     }
+ }
+
+ .animation-heartbeat {
+     animation: heartbeat 1s ease-in-out infinite;
+ }
+
+ /* 6. Neon */
+ @keyframes neon {
+     0% {
+         text-shadow: 0 0 10px rgba(255, 0, 0, 1);
+     }
+
+     50% {
+         text-shadow: 0 0 20px rgba(255, 0, 0, 1);
+     }
+
+     100% {
+         text-shadow: 0 0 10px rgba(255, 0, 0, 1);
+     }
+ }
+
+ .animation-neon {
+     animation: neon 1s ease-in-out infinite alternate;
+ }
+/* 7. Jello */
+ @keyframes jello {
+     0% {
+         transform: scale(1, 1);
+     }
+
+     30% {
+         transform: scale(1.25, 0.75) rotate(-10deg);
+     }
+
+     40% {
+         transform: scale(0.75, 1.25) rotate(10deg);
+     }
+
+     50% {
+         transform: scale(1.15, 0.85) rotate(-8deg);
+     }
+
+     65% {
+         transform: scale(0.95, 1.05) rotate(5deg);
+     }
+
+     75% {
+         transform: scale(1.05, 0.95) rotate(-5deg);
+     }
+
+     100% {
+         transform: scale(1, 1);
+     }
+ }
+
+ .animation-jello {
+     animation: jello 1s ease-in-out infinite;
+ }
+/* 8. Snowfall */
+ @keyframes snowfall {
+
+     0%,
+     100% {
+         transform: translateY(0);
+     }
+
+     50% {
+         transform: translateY(10px) rotateZ(3deg);
+     }
+ }
+
+ .animation-snowfall {
+     animation: snowfall 1s ease-in-out infinite alternate;
+ }
+/* 9. Wobble */
+ @keyframes wobble {
+     0% {
+         transform: translateX(0);
+     }
+
+     15% {
+         transform: translateX(-25%);
+         transform: rotate(-5deg);
+     }
+
+     30% {
+         transform: translateX(20%);
+         transform: rotate(3deg);
+     }
+
+     45% {
+         transform: translateX(-15%);
+         transform: rotate(-3deg);
+     }
+
+     60% {
+         transform: translateX(10%);
+         transform: rotate(2deg);
+     }
+
+     75% {
+         transform: translateX(-5%);
+         transform: rotate(-1deg);
+     }
+
+     100% {
+         transform: translateX(0);
+     }
+ }
+
+ .animation-wobble {
+     animation: wobble 1s ease-in-out infinite;
+ }