JSFiddle - React, Tailwind, and code Playground

HTML

<div id="astral">hello helloadfadfdf</div>

CSS

body {
        background: #2E3436;
    }
    #astral {
        background: #272C2D;
        color: white;
        font-family: ubuntu, trebuchet ms, sans-serif;
        line-height: 1.4;
        margin: 100px auto;
        width: 300px; 
        padding: 20px;
        font-size: 16px;

        -webkit-animation: shine 1s infinite alternate;
           -moz-animation: shine 1s infinite alternate;
             -o-animation: shine 1s infinite alternate;
                animation: shine 1s infinite alternate;
    }

    #astral i {
        font-style: normal;
        position: relative;
        /*left: 0;*/
        -webkit-animation: letters 2s infinite alternate;
           -moz-animation: letters 2s infinite alternate;
             -o-animation: letters 2s infinite alternate;
                animation: letters 2s infinite alternate;
        -webkit-transform: top .3s;
           -moz-transform: top .3s;
             -o-transform: top .3s;
                transform: top .3s;
        -webkit-transform: left .7s;
           -moz-transform: left .7s;
             -o-transform: left .7s;
                transform: left .7s;
    }

    #astral i:nth-child(2n) {
        -webkit-animation-delay: 1s;
           -moz-animation-delay: 1s;
             -o-animation-delay: 1s;
                animation-delay: 1s;
    }

    #astral i:nth-child(3n) {
        -webkit-animation-delay: 2s;
           -moz-animation-delay: 2s;
             -o-animation-delay: 2s;
                animation-delay: 2s;
    }

    @-o-keyframes shine {
        0%   { text-shadow: 0 0 10px silver; }
        33%  { text-shadow: 0 0 10px green; }
        75%  { text-shadow: 0 0 10px blue; }
        100% { text-shadow: 0 0 10px red; }
    }
    @-webkit-keyframes shine {
        0%   { text-shadow: 0 0 10px silver; }
        33%  { text-shadow: 0 0 10px green; }
        75%  { text-shadow: 0 0 10px blue; }
        100% { text-shadow: 0 0 10px red; }
    }
    @-moz-keyframes shine {
        0%   {...

JavaScript

// совсем без яваскрипта вроде никак
var astral = document.getElementById("astral");
var string = astral.innerHTML;
var modified = "";
for (var i=0; i<string.length; i++)
    modified += "<i>" +string[i]+ "</i>";
astral.innerHTML = modified;