.type {
    font-family: monospace;
    color: #0000;
    background:
        linear-gradient(-90deg, #fff 5px, #0000 0) 10px 0,
        linear-gradient(#fff 0 0) 0 0;
    background-size: calc(var(--n) * 1ch) 200%;
    -webkit-background-clip: padding-box, text;
    background-clip: padding-box, text;
    background-repeat: no-repeat;
    animation:
        b 0.7s infinite steps(1),
        t calc(var(--n) * 0.01s) steps(var(--n)) forwards;
}
@keyframes t {
    from {
        background-size: 0 200%;
    }
}
@keyframes b {
    50% {
        background-position:
            0 -100%,
            0 0;
    }
}