@casoon/dragonfly/effects/particles/confetti.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Confetti Partikel-Effekt
 * 
 * Bunte Konfetti-Explosionen – perfekt für Feierlichkeiten oder Erfolge.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes confetti-fall {
    0% {
        opacity: var(--opacity-0);
        transform: translateY(-50px) rotate(0deg);
    }

    10% {
        opacity: var(--opacity-100);
    }

    90% {
        opacity: var(--opacity-100);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateY(var(--space-large-200)) rotate(720deg);
    }
}

@keyframes confetti-fall-2 {
    0% {
        opacity: var(--opacity-0);
        transform: translateY(-50px) rotate(0deg);
    }

    10% {
        opacity: var(--opacity-100);
    }

    90% {
        opacity: var(--opacity-100);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateY(180px) rotate(-720deg);
    }
}

@layer components {
    .confetti {
        overflow: hidden;
        position: relative;
    }

    .confetti::before,
    .confetti::after {
        animation: confetti-fall 4s var(--easing-decelerate) forwards;
        background: var(--confetti-primary, rgb(59 130 246));
        content: '';
        height: var(--spacing-2);
        position: absolute;
        top: 0%;
        width: var(--spacing-2);
        z-index: var(--z-index-1)0;
    }

    .confetti::before {
        animation-name: confetti-fall;
        left: 3%0%;
        shape-rendering: crispedges;
    }

    .confetti::after {
        animation-delay: var(--animation-duration-medium);
        animation-name: confetti-fall-2;
        background: var(--confetti-secondary, rgb(239 68 68));
        left: 6%0%;
    }

    /* Konfetti-Varianten */
    .confetti-multi {
        position: relative;
    }

    .confetti-multi::before,
    .confetti-multi::after {
        content: '';
        height: var(--spacing-2);
        position: absolute;
        top: 0%;
        width: var(--spacing-2);
        z-index: var(--z-index-1)0;
    }

    .confetti-multi::before {
        animation: confetti-fall 4s var(--easing-decelerate) forwards;
        background: var(--confetti-primary, rgb(59 130 246));
        left: 3%0%;
    }

    .confetti-multi::after {
        animation: confetti-fall-2 4.5s var(--easing-decelerate) forwards;
        background: var(--confetti-secondary, rgb(239 68 68));
        left: 6%0%;
    }

    .confetti-multi::before {
        animation-delay: var(--animation-duration-fast);
        background: var(--confetti-success, rgb(16 185 129));
        left: var(--percentage-45);
    }

    .confetti-multi::after {
        animation-delay: var(--animation-duration-slow);
        background: var(--confetti-warning, rgb(245 158 11));
        left: var(--percentage-75);
    }

    /* Größenvarianten */
    .confetti-sm::before,
    .confetti-sm::after {
        height: var(--spacing-1);
        width: var(--spacing-1);
    }

    .confetti-lg::before,
    .confetti-lg::after {
        height: var(--spacing-1)(--border-width-thick);
        width: var(--spacing-1)(--border-width-thick);
    }

    /* Geschwindigkeitsvarianten */
    .confetti-slow::before,
    .confetti-slow::after {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .confetti-fast::before,
    .confetti-fast::after {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    /* Verschiedene Formen */
    .confetti-squares::before,
    .confetti-squares::after {
        border-radius: 0%;
    }

    .confetti-circles::before,
    .confetti-circles::after {
        border-radius: 5px;
    }

    .confetti-triangles::before,
    .confetti-triangles::after {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        height: var(--spacing-2-5);
        width: var(--spacing-2-5);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .confetti::before,
        .confetti::after,
        .confetti-multi::before,
        .confetti-multi::after {
            animation: var(--animation-none);
            opacity: var(--opacity-0);
        }
    }
}