:root {
--ext-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ext-duration: 0.7s;
}
@keyframes ext-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ext-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ext-fade-down {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ext-fade-left {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes ext-fade-right {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes ext-zoom-in {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
.ext-animate {
opacity: 0;
}
.ext-animate.ext-animation-complete {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.ext-animate.ext-animated-fade {
animation: ext-fade-in var(--ext-duration) var(--ext-ease) forwards;
}
.ext-animate.ext-animated-fade-up {
animation: ext-fade-up var(--ext-duration) var(--ext-ease) forwards;
}
.ext-animate.ext-animated-fade-down {
animation: ext-fade-down var(--ext-duration) var(--ext-ease) forwards;
}
.ext-animate.ext-animated-fade-left {
animation: ext-fade-left var(--ext-duration) var(--ext-ease) forwards;
}
.ext-animate.ext-animated-fade-right {
animation: ext-fade-right var(--ext-duration) var(--ext-ease) forwards;
}
.ext-animate.ext-animated-zoom-in {
animation: ext-zoom-in var(--ext-duration) var(--ext-ease) forwards;
}
@media (prefers-reduced-motion: reduce) {
.ext-animate {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}