title: Stop CSS transition from firing on page load
body: <p>I'm experiencing an issue with the CSS <code>transition</code> property beeing fired on page load.</p>
  
  <p>The problem is that when I apply a <code>color</code> <code>transition</code> to an element, (ex: <code>transition: color .2s</code>) then when the page first loads my elements flashes from black to it's own assigned color.</p>
  
  <p>Supposing I have the following code:</p>
  
  <h2>CSS</h2>
  
  <pre><code>p.green {
     color: green;
     transition: color .2s;
     -moz-transition: color .2s;
     -webkit-transition: color .2s;
     -o-transition: color .2s;
  }
  
  p.green:hover {
     color: yellow;
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;link href="css/main.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p class="green"&gt;The Flashing Text&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On page load, my <code>p.green</code> will fade from <code>black</code> to <code>green</code>.</p>
  
  <p>I don't want to apply the color transition to the <code>:hover</code> pseudo class as that would not apply the transition <em>onMouseLeave</em>.</p>
  
  <p>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!</p>
  
  <p>This happens on Google Chrome. I haven't tested in other browsers.</p>
  
  <p><a href="http://jsfiddle.net/ShyZp/2/" rel="noreferrer">jsfiddle.net/ShyZp/2</a>  <em>(thanks @Shmiddty)</em></p>