.type {
    font-family: monospace;
    color: #0000;
    background:
        linear-gradient(-90deg, #000 5px, #0000 0) 10px 0,
        linear-gradient(#000 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.1s) steps(var(--n)) forwards;
}

@keyframes t {
    from {
        background-size: 0 200%;
    }
}
@keyframes b {
    50% {
        background-position:
            0 -100%,
            0 0;
    }
}

#container {
    position: relative;
    height: 200px;
    margin: 20px;
}

.wobble {
    animation:
        wobbling_x 0.7s ease-in-out infinite alternate,
        wobbling_y 1.2s ease-in-out infinite alternate;
}

@keyframes wobbling_x {
    0% {
        margin-left: 12px;
    }

    100% {
        margin-left: 0px;
    }
}

@keyframes wobbling_y {
    0% {
        margin-top: 12px;
    }

    100% {
        margin-top: 0px;
    }
}