0

Eu estava estudando a questão da transição e me deparei com um problema: se eu colocar a transição com seus devidos parâmetros dentro da minha classe no CSS tudo que eu declarei dentro dela é ativado com a transição por exemplo a margin-top, ela não é ativada assim que a pagina é carregada mas sim com uma transição mas se eu colocar na minha classe com a pseudoclasse :hover inicialmente tudo fica certo mas quando eu tiro o mouse ocorre uma "transição bruta" já que o para a transição ocorrer é necessario que o mouse fique sobre o local, o que devo fazer para a transição ocorrer nos conformes sem causar nenhuma interferência com o meu codigo?

com essses arquivos já dá pra ver oq quero dizer

body{
	margin: 0;
}

.teste{
	width: 300px;
	height: 150px;
	background: linear-gradient(#DCDCDC,#808080);
	margin: auto;
	margin-top: 120px;
	border-radius: 20px;
	text-align: center;
	line-height: 150px;
	overflow-wrap: break-word;
	transition: 2s;
}

.teste:hover{
	width: 600px;
	height: 300px;
	line-height: 300px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
	<link rel="stylesheet" href="style.css">
	<title>aulas</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="teste">
		<h3>um titulo qualquer</h3>
	</div>
</html>

4
  • Amigo seu seu código não da para te ajudar. Clique em Editar e incluia o seu CSS e HTML
    – hugocsl
    Commented 9/06/2019 às 16:37
  • Vc quer que o botão fique aumentando e diminuindo o tempo inteiro, mesmo sem precisar fazer o :hover é isso??
    – hugocsl
    Commented 9/06/2019 às 18:26
  • Não exatamente, acontece que a minha div tem margin-top de 120px, isso já foi declarado mas ao invés da pagina já carregar ela com essa margem ocorre uma transição entende? quando a pagina é carregada aqui, a div é gerada do zero e desliza desde margin-top 0 até margin-top 120px Commented 9/06/2019 às 19:21
  • Nas ultimas atualizações do chrome eu vi alguns relatos desse tipo de problema, nessa Pergunta vc pode ver mais, leia inclusive os comentários pois acredito que eh o seu problema ai pt.stackoverflow.com/questions/383494/…
    – hugocsl
    Commented 9/06/2019 às 19:38

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .