为什么这个打字动画超出了字符数？

Question

我已经创建了一个文本输入动画，但是，在字符数量完成后边框没有停止，而是继续向前，我尝试将宽度设置为 no。字符，但这似乎没有帮助。我该如何解决这个问题？

.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>

Answer 1

您可以将 .type 容器的宽度设置为使用最大内容宽度，然后将 h1 元素的宽度从 0% 更改为 'animate' 到 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?

html

css

animation

text

css-animations