c8afd90527
Replace CSS nth-child stagger rules with JS-driven wrapper divs that set animationDelay inline. Adds delay (base offset) and interval (ms between children) props. Removes --dt-stagger-interval CSS variable and 24 nth-child rules in favor of unlimited children support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
115 lines
2.7 KiB
CSS
115 lines
2.7 KiB
CSS
/* dt-web-theme: Animation Library */
|
|
/* Source: dt-shopify-storefront animation patterns */
|
|
/* Brand-independent — no color references in keyframes */
|
|
|
|
/* ============================================================================
|
|
Entrance Animations
|
|
============================================================================ */
|
|
|
|
@keyframes dt-scale-in {
|
|
from { transform: scale(0); }
|
|
to { transform: scale(1); }
|
|
}
|
|
|
|
@keyframes dt-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes dt-slide-up {
|
|
from { transform: translateY(100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes dt-slide-right {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes dt-slide-left {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
/* ============================================================================
|
|
Interactive Animations
|
|
============================================================================ */
|
|
|
|
@keyframes dt-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes dt-ping {
|
|
75%, 100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes dt-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ============================================================================
|
|
Utility Classes
|
|
============================================================================ */
|
|
|
|
.dt-animate-scale-in {
|
|
animation: dt-scale-in 0.33s ease-in-out both;
|
|
}
|
|
|
|
.dt-animate-fade-in {
|
|
animation: dt-fade-in 0.3s ease-in-out both;
|
|
}
|
|
|
|
.dt-animate-slide-up {
|
|
animation: dt-slide-up 0.3s ease-in-out both;
|
|
}
|
|
|
|
.dt-animate-pulse {
|
|
animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.dt-animate-ping {
|
|
animation: dt-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
.dt-animate-spin {
|
|
animation: dt-spin 1s linear infinite;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Stagger Container
|
|
============================================================================ */
|
|
|
|
.dt-stagger-container {
|
|
--dt-stagger-duration: 0.33s;
|
|
}
|
|
|
|
.dt-stagger-container > * {
|
|
animation: dt-scale-in var(--dt-stagger-duration) ease-in-out both;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Transition Utilities
|
|
============================================================================ */
|
|
|
|
.dt-transition-accordion {
|
|
transition: max-height 250ms ease-in-out;
|
|
}
|
|
|
|
.dt-transition-chevron {
|
|
transition: transform 250ms ease-in-out;
|
|
}
|
|
|
|
.dt-transition-chevron[aria-expanded="true"],
|
|
.dt-transition-chevron.is-expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.dt-transition-progress {
|
|
transition: height 300ms ease-out, width 300ms ease-out;
|
|
}
|