JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://playground.thejameskyle.com/qwiqly/fonts/logo.css">
qiwlyq
adfasdfadfa

CSS

body {
    height: 75px;
    cursor: pointer;
    
    font-family: 'Airship27';
    
    text-align: center;
    line-height: 75px;
    font-size: 80px;
}

body:hover {
    -webkit-animation: logo-color 1.45s infinite;
}

@-webkit-keyframes logo-color {
      0% {color: #3f3557;}  9% {color: #3f3557;}
     10% {color: #da4c66;} 19% {color: #da4c66;}
     20% {color: #8f3c68;} 29% {color: #8f3c68;}
     30% {color: #f78376;} 39% {color: #f78376;}
     40% {color: #f3b578;} 49% {color: #f3b578;}
     50% {color: #da4c66;} 59% {color: #da4c66;}
     60% {color: #f78376;} 69% {color: #f78376;}
     70% {color: #8f3c68;} 79% {color: #8f3c68;}
     80% {color: #f3b578;} 89% {color: #f3b578;}
     90% {color: #f78376;} 99% {color: #f78376;}
    100% {color: #3f3557;}
}

JavaScript

$(document).ready(function() {
    $('body').mouseover(function() {
        var animateloop = 0;
        
        $(this).mouseout(function(){
            animateloop++;
        });
        
        while (animateloop !== 1) {
            $(this).delay(400).css(
                'font-family':'Homestead'
            ).delay(400).css(
                'font-family':'Arvo'
            ).delay(400).css(
                'font-family':'Komika'
            ).delay(400).css(
                'font-family':'Franchise'
            ).delay(400).css(
                'font-family':'Carton'
            ).delay(400).css(
                'font-family':'Lavanderia'
            ).delay(400).css(
                'font-family':'English'
            ).delay(400).css(
                'font-family':'Pacifico'
            ).delay(400).css(
                'font-family':'Atmosphere'
            ).delay(400).css(
                'font-family':'Airship27'
            );
        }
    });
});