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

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

/* Animationen - außerhalb von @layer definieren */
@keyframes typing-cursor {
    0, 100% {
        opacity: var(--opacity-100);
    }

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

@keyframes typing-text {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes typing-blink {
    0, 100% {
        opacity: var(--opacity-100);
    }

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

/* Komponenten-Styles */
@layer components {
    .typing {
        display: inline-block;
        position: relative;
    }

    .typing::after {
        content: '|';
        position: absolute;
        right: -0.5em;
    }

    .typing-sm::after {
        font-size: 0.875em;
    }

    .typing-lg::after {
        font-size: 1.25em;
    }

    .typing-text {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
    }

    .typing-text-sm {
        font-size: 0.875em;
    }

    .typing-text-lg {
        font-size: 1.25em;
    }

    .typing-blink {
        display: inline-block;
        position: relative;
    }

    .typing-blink::after {
        content: '|';
        position: absolute;
        right: -0.5em;
    }

    .typing-blink-sm::after {
        font-size: 0.875em;
    }

    .typing-blink-lg::after {
        font-size: 1.25em;
    }

    .typing-color-primary::after {
        color: var(--typing-primary, #3b82f6);
    }

    .typing-color-secondary::after {
        color: var(--typing-secondary, #6b7280);
    }

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

    .typing-color-error::after {
        color: var(--typing-error, #ef4444);
    }

    .typing-color-warning::after {
        color: var(--typing-warning, #f59e0b);
    }

    .typing-color-info::after {
        color: var(--typing-info, #06b6d4);
    }
}

/* Animations-Styles */
@layer animations {
    .typing::after {
        animation: typing-cursor 1s var(--easing-step) infinite;
    }

    .typing-slow::after {
        animation-duration: var(--animation-duration-slower);
    }

    .typing-fast::after {
        animation-duration: var(--animation-duration-medium);
    }

    .typing-text {
        animation: typing-text 3s var(--easing-typewriter);
    }

    .typing-text-sm {
        animation-duration: var(--animation-duration-slowest);
    }

    .typing-text-lg {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .typing-text-slow {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .typing-text-fast {
        animation-duration: var(--animation-duration-slowest);
    }

    .typing-blink::after {
        animation: typing-blink 1s var(--easing-step) infinite;
    }

    .typing-blink-slow::after {
        animation-duration: var(--animation-duration-slower);
    }

    .typing-blink-fast::after {
        animation-duration: var(--animation-duration-medium);
    }
}

/* Barrierefreiheit - reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer animations {
        .typing::after,
        .typing-text,
        .typing-blink::after {
            animation: var(--animation-none);
        }
    }
    
    @layer components {
        .typing::after,
        .typing-blink::after {
            opacity: var(--opacity-100);
        }
        
        .typing-text {
            width: 100%;
        }
    }
}