JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trans">
    <div id="rotate-scale" class="half">Rotate</div>
</div>

CSS

.half {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.two {
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
}

#trans {
    margin-top: 100px;
    width: 400px;
    height: 200px;
    
}

#rotate-scale {
    height: 150px;
    width: 100px;
    border: 1px blue solid;
    text-align: center;
    margin: 0 auto;
}

.rotate {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
}

.grow {
    transform: scale(2.0);
    -webkit-transform: scale(2.0) rotate(180deg);
}

JavaScript

var timeout;

$('#rotate-scale').hover(function(){
    
    $this = $(this);
    $this.addClass('rotate');
    timeout = setInterval(function(){
        $this.css("-webkit-transition", "all 2s ease-in-out");
        $this.addClass('grow');
    }, 500);
}, function(){
    clearTimeout(timeout);
    $(this).css("-webkit-transition", "all 0.5s ease-in-out");
    $(this).removeClass('rotate');
    $(this).removeClass('grow');
});