JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo one">
   Jenny Medrano
    <span class="subhead">My Porfolio</span>
</div>

CSS

.logo {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    text-align: center;
    -webkit-transition: all .2s ease-in-out;
}

.logo span {
    display: none;
}

.one {
    background-color: #5F0;
}
.two {
    background-color: #F07;
}
.three {
    background-color: #333;
    color: #fff;
    -webkit-transform: rotate(360deg);
}
.three span {
    display: block;
}

.four {
    background-color: #5D8;
}
.five {
    background-color: #FF7;
}

JavaScript

// var myInterval = setInterval(function(){ console.log("hello") }, 1000);

//setTimeout(function(){
    //clearInterval(myInterval);
//}, 5500);

var bgSwapper;
var bgCounter = 0;

var color = ["one", "two", "three", "four", "five"];
var totalBackgrounds = color.length;

$(".logo").hover(function(e){
    var $this = $(this);
    
    bgSwapper = setInterval(function(){
        $this.removeClass("one two three four five");
        bgCounter === totalBackgrounds ? bgCounter = 1 : bgCounter++;
        $this.addClass(color[bgCounter - 1]);
    }, 350);
    
}, function(e){
    
    clearInterval(bgSwapper);
    
});