Why is this typing text animation going beyond the number of characters?

Question

I have created a text typing animation, however, rather than the border stopping after the amount of characters is done, it continues on ahead, I tried setting the width to the no. of characters but this doesn't seem to help. How do I fix this problem?

.type h1{
    animation: typing 3s steps(31);
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid black;
    width: 31ch;
}

@keyframes typing {
    0%{
        width: 0ch;
    }
    100%{
        width: 31ch;
    }
}

<div class="type">
    <h1>Hobbies, Goals, and Aspirations</h1>
</div>

you need to use font-family:monospace to work with ch (ch is equal to width of all character only for monospace font otherwise it's the width of 0) — Temani Afif

Nora Nora · Accepted Answer · 2021-04-10T12:34:20

You can set the width of the .type container to use max content width and then change the width of your h1 element to 'animate' from 0% to 100%.

.type {
  width: max-content;
}

.type h1{
    animation: typing 3s steps(31);
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid black;
}

@keyframes typing {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}

<div class="type">
    <h1>Hobbies, Goals, and Aspirations</h1>
</div>

Why is this typing text animation going beyond the number of characters?

1 Answers