CSS Animation - DIV from top:200px to top:0px

Eu preciso de alguma ajuda para resolver algumas dúvidas !! Se puder me ajudar eu agradeço !!

Primeiro visite o link: http://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html

Veja o 'Código Fonte' pelo navegador !!

O que estou tentando fazer ??

Eu quero que o elemento div, faça movimento de animation, vindo from {top:200px} to {top:0px} e paralisar no topo !!

Neste exemplo, eu encontrei dois erros:

- Primeiro Erro: Quando o div automaticamente começa a se movimentar, seu eu colocar o mouse sobre ele, antes de terminar o movimento, o div dá uma pulada

direto para o topo !! "Eu não quero isso" !! Eu quero que se eu colocar o ponteiro do mouse sobre o div, que ele não dê esta subida repentina para o topo !!

Que faça o movimento para o topo sem interrupção, mesmo se antes eu puser o ponteiro do mouse !!

- Segundo Erro: Depois que o div cheguar ao topo, Se eu colocar o mouse nele, o fundo muda de cor, por animation ! Mas após isso, quando eu retiro o

ponteiro do mouse, o div novamente cai para top:200px e começa o movimento para top:0px novamente !

O que eu quero é: que o div mova somente "uma vez" and "pare" em top:0px !! Depois de parar em top:0px, que fique intacto pra sempre e apenas faça o

movimento de mudar a cor do fundo com o passar do mouse !!

I tentei procurar na internet mas não achei algo que resolvesse esses dois problemas descritos acima !

Se possível, alguém poderia me dar uma ajuda testada que realmente funcione ??

Agradecido

Carlos