Animazioni CSS e tag hover

[mavatika]

Salve, studio programmazione a scuola e abbiamo da poco iniziato l'HTML5 e CSS3.
Io volevo creare un <div> che quando il mouse ci andava sopra (usando div:hover) partiva un'animazione che spostava lo stesso div di 60px verso sinistra. Fin qui tutto bene, va. Il problema è che io vorrei fare in modo che finché il mouse è sopra il div, il div rimane spostato (di 60px verso sinistra), poi quando il mouse se ne va, il div ritorni in posizione originale, con un animazione fluida (uguale all'inversa di quella di partenza). Spero di essermi spiegato..

Per le animazioni ho usato:

@keyframes move{
    0%{top:200px; left:200px;}
    100%{top:200px; left:140px;}
}
#div:hover{animation: move 2s}