CSS 打字机效果在重复之间产生延迟

问题描述

我正在起诉此代码以创建打字机效果。有没有办法只使用 css 在每次重复之间添加延迟？ animation-delay 只延迟第一次重复。

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* DEMO-SPECIFIC STYLES */

.typewriter h1 {
  color: #00bcd4;
  font-size: 26px;
  overflow: hidden;
  border-right: .15em solid #ddd;
  white-space: Nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(30,end) infinite,blink-caret .5s step-end infinite;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,to {
    border-color: transparent
  }
  50% {
    border-color: #ddd
  }
}

<div class="wrap">
  <div class="typewriter">
    <h1>Creating waveform...</h1>
  </div>
</div>

解决方法

给你...

改变这个...

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

...进入这个：

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

这会在每次重复之间产生延迟/暂停。但是，现在编写速度要快得多，因为动画只发生了 3.5 秒的 50%。为了使书写速度大致相同，请将动画持续时间从 3.5 秒增加到 5 秒。

所以，改变这个...

animation: typing 3.5s steps(30,end) infinite,blink-caret .5s step-end infinite;

...进入这个：

animation: typing 5s steps(30,blink-caret .5s step-end infinite;

请参阅下面的代码片段。

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* DEMO-SPECIFIC STYLES */

.typewriter h1 {
  color: #00bcd4;
  font-size: 26px;
  overflow: hidden;
  border-right: .15em solid #ddd;
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 5s steps(30,blink-caret .5s step-end infinite;
}


/* The typing effect */

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


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,to {
    border-color: transparent
  }
  50% {
    border-color: #ddd
  }
}

<div class="wrap">
  <div class="typewriter">
    <h1>Creating waveform...</h1>
  </div>
</div>

html typewriter