title: CSS fade-in effect for image
body: <p>I added a fade-in effect for the logo on a web site:</p>
  
  <pre><code>#logo img {
      opacity: 0;
      -moz-transition: opacity 5s; /* Firefox 4 */
      -webkit-transition: opacity 5s; /* Safari and Chrome */
      -o-transition: opacity 5s;
      transition: opacity 5s;
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id="logo"&gt;&lt;p&gt;&lt;a href="index.html"&gt;&lt;img src="img/logo.png" ... onload="this.style.opacity='1';" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>At first view, it seems to work greatly. But on the second (third, ...) page, the logo is just displayed, it does not fade-in in IE9 or FireFox 19 or Opera 12 - only in Safari 5 and Chrome 25, the fade-in effect is available for every page.</p>
  
  <p>I hardly ever do web design, and that's just a nice to have feature I stumbled upon while playing with CSS. I think it is not appropriate to start learning how to use a big library like jQuery which I would use less than once a year.</p>
  
  <p>Is there a simple method to make it work with the other browsers on all pages? </p>