JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.demo-hover {
    position: relative;
    margin: 100px;
    animation: complexProcessReversed 2s ease-in forwards;
    width: 160px;
    height: 160px;
    background-color: #88d;
}
.demo-hover:hover {
    animation: complexProcess 2s ease-in forwards;
    width: 100px;
    height: 100px;
    background-color: #732;
}

@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;
    }
}