Эффект печатной машинки

Привет всем!

Сегодня я расскажу вам о том, как добиться эффекта печатной машинки

Оригинал

.typewriter h1 {
  overflow: hidden; /* Скрывает содержимое до анимации */
  border-right: .15em solid orange; /* Курсор печатной машинки */
  white-space: nowrap; /* Печать одной прямой строки */
  margin: 0 auto; /* Эффект скроллинга во время печати */
  letter-spacing: .15em; /* Межсимвольный интервал */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s 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: orange; }
}

Пример эффекта печатной машинки