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

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%，然后增加您的动画 duration 使其当前持续时间加倍。这样，如果是 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>

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

How do I add an animation delay between each iteration

html

css

animation

css-animations