diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css index 40c03b1..409a942 100644 --- a/frontend/assets/css/tailwind.css +++ b/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 */