JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<p id="test" class="css-typing">start</p>

CSS

.css-typing
{
    width: 30em;
    color: #a7a37e;
    font-size: 3em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
    display:block;
    margin-left:auto;
    margin-right:auto;
}


@keyframes type{
    from { width: 0; }


@-webkit-keyframes type{
    from { width: 0; }
}

JavaScript

var text =["string1", "string2", "string3"];
$('.css-typing').text(text[0]);
var i = 1;
myInt = setInterval(function(){

$('#test').text(text[i]);
 
  var el     = $('#test'),
 newone = el.clone(true);
 el.before(newone);
 $("." + el.attr("class") + ":last").remove();
 
  i++;
},6000);