CSS Typewriter Effect

Question

Я пытаюсь создать эффект записи типа, когда текст записывается, а затем в конце предложения |Курсор мигает в течение 2 секунд перед началом следующего предложения (второй h1), а затем записывает это предложение.

body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(30, end), blink-caret .5s;
}

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

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

<div class="typewriter">
  <h1>First Sentence Here</h1>
  <h1>Second Sentence Here</h1>
</div>

Answer 1

Вы можете добавить animation-delay, используя переменные CSS. Для каждого элемента h1 (примите 1-й - он использует значение по умолчанию) установите переменную --delay. Это добавит соответствующую задержку к каждой анимации.

Вам также следует изменить animation-fill-mode на both, чтобы элементы сохраняли свои начальное и конечное состояния.

body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(30, end) both, blink-caret .5s both;
  animation-delay: calc(var(--delay, 0) * 1s), calc(var(--delay, 0) * 1s + 3.5s);
}

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

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

<div class="typewriter">
  <h1>First Sentence Here</h1>

  <h1 style="--delay: 4">Second Sentence Here</h1>
</div>