JSFiddle - React, Tailwind, and code Playground

HTML

<span id="animate">I am Lord Voldemort</span>

CSS

span.anim {
    font-size:30px;
    opacity:0;
    animation: anim 1s;
    animation-fill-mode: forwards;
    -webkit-animation: anim 1s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes anim {
    from {
        -webkit-transform: rotate(0deg);
        opacity:0;
    }
    to {
        -webkit-transform: rotate(360deg);
        opacity:1;
    }
}

@keyframes anim {
    from {
        transform: rotate(0deg);
        opacity:0;
    }
    to {
        transform: rotate(360deg);
        opacity:1;
    }
}

JavaScript

$(document).ready(function () {

    var aux = $("#animate").text();
    $("#animate").text("");

    for (var x = 0; x < aux.length; x++) {
        setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")', 500 * x);
    }

});