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

【问题标题】：How do I add an animation delay between each iteration如何在每次迭代之间添加动画延迟
【发布时间】：2021-04-11 13:45:25
【问题描述】：

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

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

【问题讨论】：

css-tricks.com/css-keyframe-animation-delay-iterations

标签： html css animation css-animations

【解决方案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>

【讨论】：