Skip to main content
Pergunta reaberta por Marcus Nunes, Icaro Martins, Erlon Charles, LeAndrade, danieltakeshi
adicionou 915 caracteres ao conteúdo
Fonte Link

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>

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?

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>

Pergunta fechada como "Não é adequada para este site" por Maniero
Fonte Link

Problemas com a transição no css

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?