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>