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

[LegendaryzSB]

Olá pessoal !!

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

[Leonardo Persan]

Os dois animations estão se sobrescrevendo, não sei se tem algum jeito de usar dois ao mesmo tempo, use o transition para mudar a cor.

div {
    /* ... */
    transition: 2s;
}

div:hover {
    background-color: yellow;
}

Pode apagar ou comentar os @*keyframes example {}