JSFiddle - React, Tailwind, and code Playground

HTML

<div class='demo-hover'>
    
</div>

CSS

.demo-hover {
    width: 100px;
    height: 100px;
    margin: 100px;
    background-color: #732;
    position: relative;
}

.forwards {
    animation: complexProcess 2s ease-in forwards;
    width: 100px;
    height: 100px;
    background-color: #732;
}

.forwards--reversed {
    animation: complexProcessReversed 2s ease-in forwards;
    width: 160px;
    height: 160px;
    background-color: #88d;
}

@keyframes complexProcess {
    0% {
        background-color: #732;
        width: 100px;
        height: 100px;
    }
    40% {
        width: 140px;
        height: 140px;
    }
    100% {        
        background-color: #88d;
        width: 160px;
        height: 160px;
    }
}

@keyframes complexProcessReversed {
    0% {
        width: 160px;
        height: 160px;
        background-color: #88d;
    }
    60% {
        width: 140px;
        height: 140px;
    }
    100% {        
        background-color: #732;
        width: 100px;
        height: 100px;
    }
}

JavaScript

$('.demo-hover').hover(
    function() {
        console.log(1);
        $(this).removeClass('forwards--reversed').addClass('forwards');
    },    
    function() {
        console.log(2);
        $(this).removeClass('forwards').addClass('forwards--reversed');
    }
);