HTML

<div class="typewriter">   <h1 class="typing">The cat and the hat.</h1> </div>

Daktilo efektini elde etmenin anahtarı iki animasyon efektidir; görünen metnin animasyonu ve yanıp sönen imlecin animasyonu.
Bu iki animasyonun uygulaması da çok basittir.Metin göründüğünde daktilo animasyonu sadece öğenin uzunluğunu kontrol ederek yapılır. İmleç yanıp söner ve sağ kenarlık eklenerek ve kenarlığa renkli animasyon eklendiğinde görünür.

/* Daktilo animasyonu */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* İmleç animasyonu */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

Daha sonra belirtilen öğelere animasyon efektleri ekleyin.

.typewriter .typing {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Animasyondan önce metnin gizlendiğinden emin olun */
  border-right: .15em solid orange; /* Kenarlıkları kullanan imleç uygulaması */
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:  /** Animasyon efektleri */
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

Stil sınıflarının ne zaman gösterilip gizleneceğini kontrol etmek için bunu Javascript ile birleştirin ve farklı metinler için kolayca daktilo efektleri elde edebilirsiniz.

Tüm kodlar:https://codepen.io/oxxd/pen/NWoWgZa