JSFiddle - React, Tailwind, and code Playground

HTML

<p class="unicorn"> <span style="color: hsl(0, 100%, 50%);">L</span><span style="color: hsl(4, 100%, 50%);">o</span><span style="color: hsl(7, 100%, 50%);">r</span><span style="color: hsl(10, 100%, 50%);">e</span><span style="color: hsl(13, 100%, 50%);">m</span><span style="color: hsl(16, 100%, 50%);"> </span><span style="color: hsl(19, 100%, 50%);">i</span><span style="color: hsl(23, 100%, 50%);">p</span><span style="color: hsl(26, 100%, 50%);">s</span><span style="color: hsl(29, 100%, 50%);">u</span><span style="color: hsl(32, 100%, 50%);">m</span><span style="color: hsl(35, 100%, 50%);"> </span><span style="color: hsl(38, 100%, 50%);">d</span><span style="color: hsl(42, 100%, 50%);">o</span><span style="color: hsl(45, 100%, 50%);">l</span><span style="color: hsl(48, 100%, 50%);">o</span><span style="color: hsl(51, 100%, 50%);">r</span><span style="color: hsl(54, 100%, 50%);"> </span><span style="color: hsl(57, 100%, 50%);">s</span><span style="color: hsl(60, 100%, 50%);">i</span><span style="color: hsl(64, 100%, 50%);">t</span><span style="color: hsl(67, 100%, 50%);"> </span><span style="color: hsl(70, 100%, 50%);">a</span><span style="color: hsl(73, 100%, 50%);">m</span><span style="color: hsl(76, 100%, 50%);">e</span><span style="color: hsl(79, 100%, 50%);">t</span><span style="color: hsl(83, 100%, 50%);">,</span><span style="color: hsl(86, 100%, 50%);"> </span><span style="color: hsl(89, 100%, 50%);">c</span><span style="color: hsl(92, 100%, 50%);">o</span><span style="color: hsl(95, 100%, 50%);">n</span><span style="color: hsl(98, 100%, 50%);">s</span><span style="color: hsl(102, 100%, 50%);">e</span><span style="color: hsl(105, 100%, 50%);">c</span><span style="color: hsl(108, 100%, 50%);">t</span><span style="color: hsl(111, 100%, 50%);">e</span><span style="color: hsl(114, 100%, 50%);">t</span><span style="color: hsl(117, 100%, 50%);">u</span><span style="color: hsl(120, 100%, 50%);">r</span><span style="color: hsl(124, 100%, 50%);"> </span><span...

CSS

.unicorn:hover span {
        
    -webkit-animation: colorRotate 6s linear 0s infinite;
     -moz-animation: colorRotate 6s linear 0s infinite;
       -o-animation: colorRotate 6s linear 0s infinite;
          animation: colorRotate 6s linear 0s infinite;
    
}

@-webkit-keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

@-moz-keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

@-o-keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

@keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

JavaScript

// add animation-delay properties to span elements

var animTime = 6,   // time for the animation in seconds
    hueChange = 3,   // the hue change from one span element to the next
    prefixes = ["","-webkit-","-moz-","-o-"],
    numPrefixes = prefixes.length;

$('.unicorn').find('span').each(function (i) {
    for (var j=0;j<numPrefixes;j++) {
        $(this).css(prefixes[j]+'animation-delay', (animTime * ((i * hueChange) % 360) / 360) - animTime + 's');
    }
});