added new animations
This commit is contained in:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user