@keyframes fade-in {
from {
background-color: rgba(0, 0, 0, 0);
}
to {
background-color: rgba(0, 0, 0, 0.8);
}
}
@keyframes fade-out {
from {
background-color: rgba(0, 0, 0, 0.8);
}
to {
background-color: rgba(0, 0, 0, 0);
}
}
@keyframes slide-in {
from {
transform: translateX(500px);
}
to {
transform: translateX(0px);
}
}
@keyframes slide-out {
from {
transform: translateX(0px);
}
to {
transform: translateX(500px);
}
}
@layer base {
}
#cart-drawer[data-state="open"] {
animation: fade-in 0.4s forwards;
}
#cart-drawer[data-state="closed"] {
animation: fade-out 0.4s forwards;
}
#cart-drawer[data-state="open"] > div {
animation: slide-in 0.4s forwards;
}
#cart-drawer[data-state="closed"] > div {
animation: slide-out 0.4s forwards;
}
.dialog[data-state="open"] {
animation: fade-in 0.4s forwards;
}
.dialog[data-state="closed"] {
animation: fade-out 0.4s forwards;
}
.dialog[data-state="open"] > div {
animation: dialog-in 0.2s forwards;
}
.dialog[data-state="closed"] > div {
animation: dialog-out 0.2s forwards;
}
@keyframes dialog-in {
from {
opacity: 0;
scale: 50%;
}
to {
opacity: 1;
scale: 100%;
}
}
@keyframes dialog-out {
from {
opacity: 1;
scale: 100%;
}
to {
opacity: 0;
scale: 50%;
}
}
@keyframes loading {
0% {
left: -50%;
}
to {
left: 100%;
}
}
.reveal-fade-up {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.3s ease,
transform 0.3s ease;
transition-delay: var(--delay, 0s);
}
.reveal-fade-up.visible {
opacity: 1;
transform: translateY(0);
}