如何在每次迭代之间添加动画延迟

Question

我已经应用了'infinite'的迭代来使代码永远重复，但是没有延迟，如何在每次重复之间添加延迟？

.type {
width: max-content;
}
.type h1{
animation: typing 3s steps(31) infinite;
animation-delay: 2s;
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>

Answer 1

您可以在@keyframes规则中添加一个50%的关键帧，并将其设为width:100%，然后将动画持续时间增加到当前持续时间的两倍。这样，如果是6秒，那么在无限循环再次以0%开始之前，您将有3秒的暂停时间。

.type {
width: max-content;
}
.type h1{
animation: typing 6s steps(31) infinite;
animation-delay: 2s;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid black;
width: 0;
}
@keyframes typing {
0%{
width: 0%;
}
50%, 100% {
width: 100%;
}

}

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