html – Text typing animation


I have a DIV tag with text inside. Is it possible to change the text content in a loop with a print effect where it comes out and then goes backwards, deleting letters and starting over with new text? Is this possible with jquery ?

Question translation: typing animated text @Erik


Pretty simple solution:

var $typer = $('.typer'),
    txt = $"text"),
    tot = txt.length,
    ch  = 0;

(function typeIt() {   
  if(ch > tot) return;
  $typer.text( txt.substring(0, ch++) );
  setTimeout(typeIt, ~~(Math.random()*(300-60+1)+60));
.typer:after {
  display: inline-block;
  vertical-align: middle;
  background: #000;
  animation: caretPulsate 1s linear infinite; 
  -webkit-animation: caretPulsate 1s linear infinite; 
@keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
@-webkit-keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
<script src=""></script>
<span class="typer" data-text="Привет! Моё имя Al. Я проведу вас через весь процесс установки приложения."></span>

So basically jQuery gets your element's data-text , adds character by character, and the pulsating dash ("caretPulsate") is something animated with CSS3 :after on the SPAN element.

Translation of the answer: typing animated text @Roko C. Buljan

Scroll to Top