I'm experiencing an issue with the CSS transition property beeing fired on page load.
The problem is that when I apply a color transition to an element, (ex: transition: color .2s) then when the page first loads my elements flashes from black to it's own assigned color.
Supposing I have the following code:
CSS
p.green {
color: green;
transition: color .2s;
-moz-transition: color .2s;
-webkit-transition: color .2s;
-o-transition: color .2s;
}
p.green:hover {
color: yellow;
}
HTML
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<p class="green">The Flashing Text</p>
</body>
</html>
On page load, my p.green will fade from black to green.
I don't want to apply the color transition to the :hover pseudo class as that would not apply the transition onMouseLeave.
I'ts really annoying having the text flashing across the webpage. Up to this moment I have been avoiding using transitions unless I really need them and even so I use with care. It would be great if there is some really obvious solution to this that I'm not seeing!
This happens on Google Chrome. I haven't tested in other browsers.
jsfiddle.net/ShyZp/2 (thanks @Shmiddty)
See Question&Answers more detail:os
