@casoon/dragonfly/effects/motion/morph.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.

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

@keyframes morph-pulse {
    0, 100% {
        border-radius: 3px 70 70 30 / 30 30 70 70;
    }

    50% {
        border-radius: 7px 30 30 70 / 70 70 30 30;
    }
}

@keyframes morph-pulse-sm {
    0, 100% {
        border-radius: 2px 80 80 20 / 20 20 80 80;
    }

    50% {
        border-radius: 8px 20 20 80 / 80 80 20 20;
    }
}

@keyframes morph-pulse-lg {
    0, 100% {
        border-radius: 4px 60 60 40 / 40 40 60 60;
    }

    50% {
        border-radius: 6px 40 40 60 / 60 60 40 40;
    }
}

@layer components {
    .morph {
        transition: all 0.3s var(--easing-smooth);
    }

    .morph:hover {
        border-radius: 3px 70 70 30 / 30 30 70 70;
    }

    .morph-sm:hover {
        border-radius: 2px 80 80 20 / 20 20 80 80;
    }

    .morph-lg:hover {
        border-radius: 4px 60 60 40 / 40 40 60 60;
    }

    .morph-slow {
        transition-duration: var(--animation-duration-medium);
    }

    .morph-fast {
        transition-duration: var(--animation-duration-fast);
    }

    .morph-blob {
        transition: all 0.3s var(--easing-smooth);
    }

    .morph-blob:hover {
        border-radius: 6px 40 30 70 / 60 30 70 40;
    }

    .morph-blob-sm:hover {
        border-radius: 5px 50 20 80 / 50 20 80 50;
    }

    .morph-blob-lg:hover {
        border-radius: 7px 30 40 60 / 70 40 60 30;
    }

    .morph-wave {
        transition: all 0.3s var(--easing-smooth);
    }

    .morph-wave:hover {
        border-radius: 3px 70 30 70 / 30 70 30 70;
    }

    .morph-wave-sm:hover {
        border-radius: 2px 80 20 80 / 20 80 20 80;
    }

    .morph-wave-lg:hover {
        border-radius: 4px 60 40 60 / 40 60 40 60;
    }

    .morph-pulse {
        animation: morph-pulse 2s infinite;
    }

    .morph-pulse-sm {
        animation: morph-pulse-sm 2s infinite;
    }

    .morph-pulse-lg {
        animation: morph-pulse-lg 2s infinite;
    }

    .morph-color-primary {
        background: var(--morph-primary, #3b82f6);
    }

    .morph-color-secondary {
        background: var(--morph-secondary, #6b7280);
    }

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

    .morph-color-error {
        background: var(--morph-error, #ef4444);
    }

    .morph-color-warning {
        background: var(--morph-warning, #f59e0b);
    }

    .morph-color-info {
        background: var(--morph-info, #06b6d4);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .morph,
        .morph-blob,
        .morph-wave,
        .morph-pulse,
        .morph-pulse-sm,
        .morph-pulse-lg {
            animation: var(--animation-none);
            transition: var(--transition-none);
        }
    }
}