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