CSS typewritter effect create delay between repeats

Question

I am using this code to create typewriter effect. Is there a way to add delay between each repetition using only CSS? animation-delay only delays the first repetition.

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

Have you see this one? https://stackoverflow.com/a/61565233/6525081 — A. Meshu, Jul 17 '21 at 19:57

score 1 · Accepted Answer · answered Jul 17 '21 at 20:22

Here you go...

Change this...

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

...into this:

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

This creates a delay/pause in-between each repetition. But, now the writing is a lot faster because the animation is happening only 50% of 3.5s. To make writing approximately the same speed, increase the animation duration from 3.5s to 5s.

So, change this...

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

...into this:

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

See the snippet below.

.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, end) infinite, 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>

CSS typewritter effect create delay between repeats

1 Answers1