added new animations

frontend/assets/css/tailwind.css

@@ -121,12 +121,18 @@
     --breakpoint-xs: 480px;
 
     /* ANIMATIONS */
-    --animate-marquee: marquee 3s linear infinite;
+    --animate-marquee: marquee 20s linear infinite;
+    --animate-marquee-reverse: marquee 20s linear infinite reverse;
     --animate-slide-down: slideDown 300ms ease-out;
     --animate-slide-up: slideUp 300ms ease-out;
     --animate-overlay-show: overlayShow 150ms ease-in;
     --animate-content-show: contentShow 150ms ease-in;
 
+    --animate-slide-down-fade: slideDownAndFade 300ms ease-out;
+    --animate-slide-left-fade: slideLeftAndFade 300ms ease-out;
+    --animate-slide-up-fade: slideUpAndFade 300ms ease-out;
+    --animate-slide-right-fade: slideRightAndFade 300ms ease-out;
+
     --animate-toast-hide: toastHide 100ms ease-in;
     --animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
     --animate-toast-out: toastSlideOut 200ms ease-out;
@@ -205,6 +211,50 @@
             transform: translateX(calc(100% + var(--viewport-padding)));
         }
     }
+
+    @keyframes slideDownAndFade {
+        from {
+            opacity: 0;
+            transform: translateY(-2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideLeftAndFade {
+        from {
+            opacity: 0;
+            transform: translateX(2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes slideUpAndFade {
+        from {
+            opacity: 0;
+            transform: translateY(2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideRightAndFade {
+        from {
+            opacity: 0;
+            transform: translateX(-2px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
 }
 
 /* CONTAINER */