0

I'm trying to make a transition effect with background-color when hovering a div element. The color change works exactly as I expected (from red to black in 3 seconds). However, the element receives an undesirable fade-in effect whenever the browser opens or refresh my HTML page.

In order to check if this would happen to other HTML elements, I also tried to apply the same CSS transition to a text element. As a result, the text fades from black to red when the page opens. This is also undesirable since the text should start red and turn to black just when I hover it.

Here is my code:

body {
    margin: 0;
}

.exemplo1 {
    margin: auto;
    margin-top: 100px;
    width: 200px;
    height: 200px;
    background-color: #F00;
    transition: background-color 3s linear;
    -moz-transition: background-color 3s linear;
    -o-transition: background-color 3s linear;
    -webkit-transition: background-color 3s linear;
}

.exemplo1:hover {
    background-color: #000;
}

p {
    color: #F00;
    font-size: 25px;
    font-weight: bold;
    transition: color 3s linear;
    -moz-transition: color 3s linear;
    -o-transition: color 3s linear;
    -webkit-transition: color 3s linear;
}

p:hover {
    color: #000;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Página de Teste</title>
    <link rel="stylesheet" href="transicoes.css" />
</head>
<body>
    <div class="exemplo1"></div>
    <p>Ola mundo!</p>
</body> 
</html>

And here is how the file opens at Google Chrome: https://youtu.be/o6LdihbZIBU

This is happening at Google Chrome, Opera and Microsoft Edge, but not at Firefox. I'm using VS Code as my text editor.

Would you guys have any idea of why this is happening?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Rian Miranda
  • 3
  • 2
  • 1
    As I see it (Chrome) the animation works correctly. The rect is changing the color from red to black while hovering. – michaelT Sep 18 '20 at 14:03
  • 1
    This is almost certainly an issue with caching or some other weird local scenario. :hover styles do not apply until you hover over the affected element. Try copying your code to notepad, saving it as a .html file, and then opening that file in a browser. It may just be how your mouse cursor is positioned when you click "run" or something like that. – TylerH Sep 18 '20 at 14:04
  • 1
    This could help https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load – dantheman Sep 18 '20 at 14:04
  • Thanks for your help guys! The post @dantheman linked helped me solve the problem. – Rian Miranda Sep 18 '20 at 15:16

2 Answers2

0

Transitions are basically a move from state A to state B. You get a fadein when the site opens or is refreshed because you're stating that the default states of your elements should have a transition to begin with:

exemplo-1 and p both have transitions for their default states.

Try moving the transitions to the :hover states, for example:

Instead of:

p {
    color: #F00;
    font-size: 25px;
    font-weight: bold;
    transition: color 3s linear;
}

p:hover {
    color: #000;
}

Make it:

p {
    color: #F00;
    font-size: 25px;
    font-weight: bold;
}
p:hover {
    color: #000;
    transition: color 3s linear;
}

Alternatively, you can declare a 0s transition for elements in their default state and something else in their :hover but there's no need to complicate things if you're just starting to get familiar with this concept.

Capagris
  • 3,811
  • 5
  • 30
  • 44
  • 1
    This behavior may not always be desirable, as the animation will suddenly stop as soon as the cursor is no longer over the element. So the animation won't end smoothly. – michaelT Sep 18 '20 at 14:08
  • I am aware of that, the point is simply to get him to understand how transitions work, from which his doubt arises. With the above code, he can then see a) no more initial transitions on load/refresh and b) they do fire on hover – Capagris Sep 18 '20 at 14:12
  • @Capagris and michaelT thanks a lot for your comments! I've tried to use the transition inside the hover state before asking this question, but as michaelT said, there was no transition when unhovering. Unfortunatelly, this is not what I'm looking for. I've seen I couple of courses where the instructor uses transitions at the initial element, and they work just fine. – Rian Miranda Sep 18 '20 at 15:00
-2

This is due to your use of the transition element in each initial statement. Your code might look something like this to achieve your desired effect.

.exemplo1 {
    margin: auto;
    margin-top: 100px;
    width: 200px;
    height: 200px;
    background-color: #F00;
}

.exemplo1:hover {
    background-color: #000;
    transition: background-color 3s linear;
    -moz-transition: background-color 3s linear;
    -o-transition: background-color 3s linear;
    -webkit-transition: background-color 3s linear;
}

p {
    color: #F00;
    font-size: 25px;
    font-weight: bold;
}

p:hover {
    color: #000;
    transition: color 3s linear;
    -moz-transition: color 3s linear;
    -o-transition: color 3s linear;
    -webkit-transition: color 3s linear;
}

Adding on a transition on the "non hovered" state will have it fade in or out when the HTML scene is loaded into view. Adding it on :hover will allow for the transition to take place while hovered over only. Hopefully this helps!

thealexvond
  • 69
  • 1
  • 7
  • This would make the transition only work on hover, when unhovering there would be no transition to the original state. – dantheman Sep 18 '20 at 14:07
  • Which is what the question of this thread is. It was undesirably loading with the transition when the page opened. – thealexvond Sep 18 '20 at 14:09
  • I don't think making every animation look bad is a good solution, not what the poster wants. This issue has been raised several times before and has other solutions. – dantheman Sep 18 '20 at 14:12
  • Understandable and I agree, this is how rudimentary transitions work and using them in a resting state can have the effects he is experiencing. You have to start education some where. We all started at this place before we got to where we are. I am not saying this is the ideal solution, but it explains as to why they are experiencing their asked issue. – thealexvond Sep 18 '20 at 14:16
  • dantheman and @thealexvond thanks a lot for your comments! I've tried to use the transition inside the hover state before asking this question, but as thealexvond said, there was no transition when unhovering. Unfortunatelly, this is not what I'm looking for. I've seen I couple of courses where the instructor uses transitions at the initial element, and they work just fine. – Rian Miranda Sep 18 '20 at 14:56