Hier werden für verschiedene Werte eingegeben für Anfangs- und Endanimation. Wenn man das div berührt :hover läuft die Animation in 4 Sekunden ab, zurück in den Ursprungszustand geht es in 1 Sekunde.
div {
background-color: #7EB7AA;
width: 100px;
height: 100px;
transition: all 1s ease-in;
}
div:hover {
width: 300px;
height: 200px;
transition: all 4s ease-out;
}