Andei criando algumas transição em alguns projetos e acabei notando que a transição ocorre quando a página é carregada ou atualizada. Tenho este exemplo em que a transição é para ocorrer apenas quando eu passar o mouse sobre a div
, e ele muda a cor com uma transição mais suave, mas a transição é aplicada também quando a página é carregada.
div{
background-color: red;
width: 200px;
height: 200px;
transition: background-color 2s;
}
div:hover{
background-color: black;
}
<div></div>
Parece um efeito de opacidade e depois volta a cor normal. Isso ocorre apenas com o Chrome e Opera, pois testei no Firefox, Edge, IE11 e o efeito não acontece no stackoverflow creio que não vai dar para vocês notarem, terão que criar um arquivo html, Mas existe algum meio para parar de acontecer isso? seja em código ou no browser?