JSFiddle - React, Tailwind, and code Playground

HTML

<div onmouseover="this.classList.add('animate')"></div>

CSS

div {
    background-color: red;
    height: 10vh;
    width: 10vw;
    
    
}
div.animate
 {
     animation: change_width_back 0.7s forwards;
 }

div:hover {
    animation: change_width 0.7s forwards;
}
@keyframes change_width {
    from {
        width: 10vw;
    }
    to {
        width: 15vw;
    }
}
@keyframes change_width_back {
    from {
        width: 15vw;
    }
    to {
        width: 10vw:
    }
}