How can "Transition" in CSS not occur when the page is updated?

Question

I’ve been creating some transition in some projects and I ended up noticing that the transition occurs when the page is loaded or updated. I have this example where the transition is to occur only when I pass the mouse over to div, and it changes the color with a smoother transition, but the transition is applied also when the page is loaded.

div{
    background-color: red;
    width: 200px;
    height: 200px;
    transition: background-color 2s;
}

div:hover{
    background-color: black;
}

<div></div>

It looks like an opacity effect and then returns to normal color. This occurs only with the Chrome and Opera, because I tested on Firefox, Edge, IE11 and the effect does not happen in the stackoverflow I don’t think you’ll notice, you’ll have to create an html file, but is there any way to stop it from happening? either in code or in the browser?

Answer 1

To work in the mentioned browsers.

div{
    background-color: red;
    width: 200px;
    height: 200px;
    webkit-transition: background-color 2s; /* Para Google 
    Chrome anterior a 26.0 e para Safari 3.0 ~ 6.0*/
    -moz-transition: background-color 2s; /*Para Mozilla 
     anterior 16.0 */
     -o-transition: background-color 2s; /* Para Opera 
     anterior 12.1 */
    transition: background-color 2s;
}

div:hover{
    background-color: black;
}

Answer 2

Because there are many browsers, and each one with its specification, it is necessary to add these prefixes for a CSS style to work on all. So we have to:

-webkit-

(Chrome, Safari, latest versions of Opera.)

-moz-

(Firefox)

-o-

(Old versions of Opera)

-ms-

(Internet Explorer)

Mozilla Reference Link