Add _animations.css with new animations

Created a new file named _animations.css in the Bootstrap repository. This file contains several useful animations that can be utilized across various components and elements within Bootstrap. These animations are designed to enhance user experience and add visual appeal to web projects. The animations have been carefully crafted to ensure compatibility and seamless integration with Bootstrap's existing styles and functionality. This contribution aims to expand the animation options available to Bootstrap users, providing them with more creative possibilities for designing modern and engaging interfaces.

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;
+ }