Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GuilhermeSouzaRumpe

Problemas com a "transition" no Css3

Por , em Desenvolvimento frontend

Recommended Posts

GuilhermeSouzaRumpe    0

GuilhermeSouzaRumpe
Postado

eu coloca a transition pra mudar em hover e a div ir para 200px ao passar o mouse,

mas coloquei com transition-timing-function: ease; para dar uma animação atraente mas ela simplesmente aparece no outro lado

sem efeito e ainda tem um bug de aparecer e desaparecer por alguns segundos ate parar!

 

HTML:

<Html>
<Head>

<title> </title>

</Head>
<Link href="css.css" Rel="Stylesheet" Type="text/css">

<Body>

      <div id="live"></div>

</Body>

</Html>

CSS:

Body{

	padding: 50px;
}
#live{
    width: 100px;
    height: 100px;
	background-color: yellow;
    color: black;
    padding: 30px;
    Transition-Property: all;
    Transition-duraction:5s;
    transition-timing-function: ease;
}

#live:hover{
	margin-left: 400px;
 
}

Desde já, valeu!! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Olá Guilherme, blza!

 

Troque seu CSS por esse, e veja se funciona:

 

 

CSS

Body{
padding: 50px;
}

#live{
    width: 100px;
    height: 100px;
    background: yellow;
    padding: 30px;
    transition: width 2s;	
    transition-timing-function: ease;
}

#live:hover{
	width: 400px;
}

Espero ter ajudado.

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

wesleyguirra    0

wesleyguirra
Postado

tenta sempre usar a propriedade transition em vez de "trasition-duration, transition-property".

no seu caso ficaria assim:

#live {
width: 100px;
transition: all 5s ease;
}

#live:hover {
width: 200px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito