@casoon/dragonfly/effects/interaction/success.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.

/**
 * Success-Effekte
 * 
 * Diese Datei enthält verschiedene Success-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@keyframes success-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0%);
    }

    40% {
        transform: translateY(calc(-1% * var(--spacing-2-5)));
    }

    60% {
        transform: translateY(calc(-1% * var(--spacing-1)));
    }
}

@keyframes success-bounce-sm {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0%);
    }

    40% {
        transform: translateY(calc(-1% * var(--spacing-1)));
    }

    60% {
        transform: translateY(calc(-1 * var(--border-width-thick)));
    }
}

@keyframes success-bounce-lg {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0%);
    }

    40% {
        transform: translateY(calc(-1% * var(--spacing-5)));
    }

    60% {
        transform: translateY(calc(-1% * var(--spacing-2-5)));
    }
}

@keyframes success-pulse {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-70);
    }
}

@keyframes success-check {
    0% {
        opacity: var(--opacity-0);
        transform: translate(-50%, -50%) scale(0);
    }

    50% {
        opacity: var(--opacity-100);
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        opacity: var(--opacity-100);
        transform: translate(-50%, -50%) scale(1);
    }
}

@layer components {
    .success-bounce {
        animation: success-bounce 0.5s var(--easing-bounce) both;
    }

    .success-bounce-sm {
        animation: success-bounce-sm 0.5s var(--easing-bounce) both;
    }

    .success-bounce-lg {
        animation: success-bounce-lg 0.5s var(--easing-bounce) both;
    }

    .success-border {
        animation: success-pulse 2s infinite;
        border: var(--border-width-thick) solid var(--success-color, #10b981);
    }

    .success-border-sm {
        border-width: var(--border-width);
    }

    .success-border-lg {
        border-width: var(--spacing-1);
    }

    .success-bg {
        animation: success-pulse 2s infinite;
        background-color: var(--success-bg, rgb(16 185 129 / 10%));
    }

    .success-bg-sm {
        background-color: var(--success-bg-sm, rgb(16 185 129 / 5%));
    }

    .success-bg-lg {
        background-color: var(--success-bg-lg, rgb(16 185 129 / 20%));
    }

    .success-text {
        color: var(--success-text, #10b981);
    }

    .success-text-sm {
        color: var(--success-text-sm, #34d399);
    }

    .success-text-lg {
        color: var(--success-text-lg, #059669);
    }

    .success-glow {
        animation: success-pulse 2s infinite;
        box-shadow: 0 0 var(--spacing-2-5) var(--success-glow, rgb(16 185 129 / 50%));
    }

    .success-glow-sm {
        box-shadow: 0 0 var(--spacing-1) var(--success-glow-sm, rgb(16 185 129 / 30%));
    }

    .success-glow-lg {
        box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--success-glow-lg, rgb(16 185 129 / 70%));
    }

    .success-check {
        position: relative;
    }

    .success-check::after {
        animation: success-check 0.5s var(--easing-smooth);
        color: var(--success-color, #10b981);
        content: '✓';
        font-size: 1.5em;
        left: 5%0%;
        position: absolute;
        top: 5%0%;
        transform: translate(-50%, -50%);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .success-bounce,
        .success-bounce-sm,
        .success-bounce-lg,
        .success-border,
        .success-bg,
        .success-glow,
        .success-check::after {
            animation: var(--animation-none);
        }
    }
}