Ir para conteúdo
Fórum CódigoFonte.net
Legendaryz0FCF

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

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...

×
×
  • Criar Novo...