CSS transition Property

<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}
</style>

Sources:

https://www.w3schools.com/cssref/css3_pr_transition.asp

https://stackoverflow.com/questions/55158038/how-to-animate-alignment-from-top-to-bottom-on-hover

http://sapphion.com/2011/10/25/css3-gradient-transition-with-background-position/

https://codepen.io/nrowe/pen/eafxK