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

[Carlos Web 0]

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
 

[Omar~ 87]

Spoiler

<style>
    div {
        border-radius: 8px;
        width: 200px;
        height: 400px;
        background-color: red;
        word-wrap: break-word;
        text-align: left;
        animation: movimento 4s;
        position: relative;
        transition: 2s
    }
    div:hover {
        background-color: yellow
    }
    @keyframes movimento {
        0% {top: 200px}
        100% {top: 0px}
    }
</style>

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

 

 

Seu problema, além de erros no CSS era que você estava orientando os efeitos de forma errada.

 

Só uma coisa que fiquei curioso.

Essa div ela tem que acompanhar a rolagem da tela (ficar fixa)?

Se sim troque a propriedade da div de position: relative; para position: fixed;

 

Veja se é esse o resultado final que espera.

[Carlos Web 0]

Isso....é exatamente isso............simples assim...!! Desculpe a minha falta de conhecimento lógico, mas é isso mesmo !!

Valeu
obrigado