Reines HTML+CSS, um einen Tippeffekt zu erzielen

<div class="text">Hallo Welt!</div>

:Wurzel {
    /* Anzahl der Zeichen */
    --Schritte: 12;
    /* Animationszeit */
    --Dauer: 2,5 s;
    /* Schriftgröße */
    --Schriftgröße: 50px;
    /* Cursorgröße */
    --Cursorgröße: 20px;
}

.text {
    Farbe: #333;;
    Position: relativ;
    Anzeige: Inline-Block;
    Schriftfamilie: „Courier New“, Courier, Monospace;
    Schriftgröße: var(--fontSize);
    Zeilenhöhe: 1;
}

.text::nach {
    Inhalt: '';
    Breite: var(--cursorSize);
    Höhe: var(--fontSize);
    Hintergrundfarbe: schwarz;
    Z-Index: 2;
    Position: absolut;
    Animation: Blinken 1s var(--duration) Schritt-Ende unendlich,
               bewegeCursor var(--duration) Schritte(var(--steps)) vorwärts;
}

.text::vor {
    Inhalt: '';
    Breite: 100 %;
    Höhe: var(--fontSize);
    Z-Index: 1;
    Position: absolut;
    Hintergrund: linearer Farbverlauf (#fff, #fff) keine Wiederholung oben rechts;
    Animation: zeigeText var(--duration) Schritte(var(--steps)) vorwärts;
}

/* Cursorblinkanimation*/
@keyframes blinken {
    0% {
        Hintergrundfarbe: schwarz;
    }
    50 % {
        Hintergrundfarbe: transparent;
    }
    100 % {
        Hintergrundfarbe: schwarz;
    }
}

/* Animation der Cursorbewegung*/
@keyframes moveCursor {
    0% {
        links: 0%;
    }
    100 % {
        links: 100 %;
    }
}

/* Bewegte Hintergrundanimation */
@keyframes zeigenText {
    0% {
        Hintergrundgröße: 100 % 100 %;
    }
    100 % {
        Hintergrundgröße: 0 % 100 %;
    }
}