flexicss-animations.css

/* flexicss-animations.css - Modern Animation Library (2026)
 *
 * View Transitions API support, scroll-driven animations,
 * spring easing, reduced motion respect, and composable utilities.
 */

/* ── Core Keyframes ──────────────────────────────────────── */

/* Fade */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide */
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideInDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Scale */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}

/* Bounce */
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15%); }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulse */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Wiggle */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Skeleton shimmer */
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Animation Classes ───────────────────────────────────── */

.fade-in { animation: fadeIn var(--duration-slow) var(--ease-default) both; }
.fade-out { animation: fadeOut var(--duration-slow) var(--ease-default) both; }
.fade-in-up { animation: fadeInUp var(--duration-slow) var(--ease-out) both; }
.fade-in-down { animation: fadeInDown var(--duration-slow) var(--ease-out) both; }

.slide-in { animation: slideInLeft 0.5s var(--ease-out) both; }
.slide-in-left { animation: slideInLeft 0.5s var(--ease-out) both; }
.slide-in-right { animation: slideInRight 0.5s var(--ease-out) both; }
.slide-in-up { animation: slideInUp 0.5s var(--ease-out) both; }
.slide-in-down { animation: slideInDown 0.5s var(--ease-out) both; }

.scale-in { animation: scaleIn var(--duration-slow) var(--ease-spring) both; }
.scale-out { animation: scaleOut var(--duration-slow) var(--ease-default) both; }
.bounce-in { animation: bounceIn 0.6s var(--ease-bounce) both; }

.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s var(--ease-default) infinite; }
.animate-ping { animation: ping 1s var(--ease-default) infinite; }
.animate-bounce { animation: bounce 1s var(--ease-bounce) infinite; }
.animate-shake { animation: shake 0.5s var(--ease-default); }
.animate-wiggle { animation: wiggle 1s var(--ease-default) infinite; }
.animate-float { animation: float 3s var(--ease-default) infinite; }

/* ── Duration Modifiers ──────────────────────────────────── */
.duration-75 { animation-duration: 75ms !important; }
.duration-100 { animation-duration: 100ms !important; }
.duration-150 { animation-duration: 150ms !important; }
.duration-200 { animation-duration: 200ms !important; }
.duration-300 { animation-duration: 300ms !important; }
.duration-500 { animation-duration: 500ms !important; }
.duration-700 { animation-duration: 700ms !important; }
.duration-1000 { animation-duration: 1000ms !important; }

/* ── Delay Modifiers ─────────────────────────────────────── */
.delay-75 { animation-delay: 75ms !important; }
.delay-100 { animation-delay: 100ms !important; }
.delay-150 { animation-delay: 150ms !important; }
.delay-200 { animation-delay: 200ms !important; }
.delay-300 { animation-delay: 300ms !important; }
.delay-500 { animation-delay: 500ms !important; }
.delay-700 { animation-delay: 700ms !important; }
.delay-1000 { animation-delay: 1000ms !important; }

/* ── Stagger Helpers (for child elements) ────────────────── */
.stagger > :nth-child(1) { animation-delay: 0ms; }
.stagger > :nth-child(2) { animation-delay: 50ms; }
.stagger > :nth-child(3) { animation-delay: 100ms; }
.stagger > :nth-child(4) { animation-delay: 150ms; }
.stagger > :nth-child(5) { animation-delay: 200ms; }
.stagger > :nth-child(6) { animation-delay: 250ms; }
.stagger > :nth-child(7) { animation-delay: 300ms; }
.stagger > :nth-child(8) { animation-delay: 350ms; }
.stagger > :nth-child(9) { animation-delay: 400ms; }
.stagger > :nth-child(10) { animation-delay: 450ms; }

/* ── Transition Utilities ────────────────────────────────── */
.transition-none { transition: none !important; }
.transition-all { transition: all var(--duration-normal) var(--ease-default) !important; }
.transition-colors {
    transition: color var(--duration-normal) var(--ease-default),
                background-color var(--duration-normal) var(--ease-default),
                border-color var(--duration-normal) var(--ease-default) !important;
}
.transition-opacity { transition: opacity var(--duration-normal) var(--ease-default) !important; }
.transition-shadow { transition: box-shadow var(--duration-normal) var(--ease-default) !important; }
.transition-transform { transition: transform var(--duration-normal) var(--ease-default) !important; }

/* ── Hover Transform Utilities ───────────────────────────── */
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

/* ── Scroll-Driven Animations ────────────────────────────── */
@supports (animation-timeline: scroll()) {
    .scroll-fade-in {
        animation: fadeIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }

    .scroll-fade-in-up {
        animation: fadeInUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }

    .scroll-slide-in-left {
        animation: slideInLeft linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }

    .scroll-scale-in {
        animation: scaleIn ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }

    .scroll-progress {
        animation: grow-width linear;
        animation-timeline: scroll();
    }

    @keyframes grow-width {
        from { width: 0%; }
        to { width: 100%; }
    }
}

/* ── View Transitions ────────────────────────────────────── */
@supports (view-transition-name: hero) {
    .view-transition {
        view-transition-name: var(--vt-name, auto);
    }

    .view-transition-hero {
        view-transition-name: hero;
    }

    .view-transition-card {
        view-transition-name: card;
    }

    ::view-transition-old(*) {
        animation: fadeOut 0.2s var(--ease-default);
    }

    ::view-transition-new(*) {
        animation: fadeIn 0.2s var(--ease-default);
    }

    ::view-transition-old(hero) {
        animation: scaleOut 0.3s var(--ease-default);
    }

    ::view-transition-new(hero) {
        animation: scaleIn 0.3s var(--ease-spring);
    }
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-fade-in,
    .scroll-fade-in-up,
    .scroll-slide-in-left,
    .scroll-scale-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}