Анимация печати текста

У меня есть тег DIV с текстом внутри. Можно ли изменить текстовое содержимое в цикле с помощью печатающего эффекта, где он выводится, а затем идет назад, удаляя буквы и начиная все заново с нового текста? Это возможно с jquery?
Перевод вопроса: typing animated text @Erik

Ответ

Довольно простое решение:
var $typer = $('.typer'), txt = $typer.data("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)); }()); /* PULSATING CARET */ .typer:after { content:""; display: inline-block; vertical-align: middle; width:1px; height:1em; 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;} }
Таким образом, в основном jQuery получает data-text вашего элемента, вставляет символ за символом, а пульсирующая черточка ("caretPulsate") - это нечто анимированное при помощи CSS3 :after элемента SPAN.
Перевод ответа: typing animated text @Roko C. Buljan