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.
Solution 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.
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!
Problem :
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.
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?
Comments
Comment posted by michaelT
As I see it (Chrome) the animation works correctly. The rect is changing the color from red to black while hovering.
Comment posted by TylerH
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.
Comment posted by stackoverflow.com/questions/14389566/…
This could help
Comment posted by Rian Miranda
Thanks for your help guys! The post @dantheman linked helped me solve the problem.
Comment posted by michaelT
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.
Comment posted by Capagris
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
Comment posted by Rian Miranda
@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.
Comment posted by dantheman
This would make the transition only work on hover, when unhovering there would be no transition to the original state.
Comment posted by thealexvond
Which is what the question of this thread is. It was undesirably loading with the transition when the page opened.
Comment posted by dantheman
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.
Comment posted by thealexvond
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.
Comment posted by Rian Miranda
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.
