0
I was studying the transition issue and came across a problem: if I put the transition with its proper parameters within my class in CSS everything I declared within it is activated with the transition for example the margin-top, it is not activated as soon as the page is loaded but rather with a transition but if I put in my class with the pseudo class :Hover initially everything gets right but when I shoot the mouse takes place a "raw transition" since for the transition to occur it is necessary that the mouse stay on the location, what I must do for the transition occur in the conformers without causing any interference with my code?
with these files you can see what I mean
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>
Friend your code doesn’t help you. Click Edit and include your CSS and HTML
– hugocsl
You want the button to keep increasing and decreasing all the time, even without having to do the :??
– hugocsl
Not exactly, it happens that my div has margin-top of 120px, this has already been declared but instead of the page already load it with this margin occurs a transition understand? when the page is loaded here, the div is generated from scratch and slides from margin-top 0 to margin-top 120px
– Joanderson Santos
In the last updates of Chrome I saw some reports of this type of problem, in this question you can see more, read the comments as I believe that is your problem ai https://answall.com/questions/383494/css-functionand-different-dentro-da-tag-ou-em-arquivo-separate-css
– hugocsl