title: Banner rotation in JavaScript with animation using CSS3
body: <p>I have to write a simple HTML banner rotator in JavaScript with animated transition using CSS3. I came with this:</p>
  
  <ul>
  <li><p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="css/banner.css" type="text/css" /&gt;
      &lt;script type="text/javascript" src="scripts/banner.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;&lt;img src="img/banner1.jpg" alt="" id="banner" /&gt;&lt;/div&gt;
      &lt;script&gt;window.onload = rotateAnimation('banner', 5000);&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre></li>
  <li><p>CSS:</p>
  
  <pre><code>#banner {
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
  }
  @keyframes myfirst {
    0%    {opacity: 0;}
    10%   {opacity: 1;}
    90%   {opacity: 1;}
    100%  {opacity: 0;}
  }
  </code></pre></li>
  <li><p>JavaScript:</p>
  
  <pre><code>var i = 0;
  var banners = new Array("img/banner1.jpg", "img/banner2.jpg", "img/banner3.jpg");
  
  function rotateAnimation(el, speed) {
    var elem = document.getElementById(el);
  
    elem.src = banners[i];
  
    setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
    i++;
  
    if(i === banners.length) i = 0;
  }
  </code></pre></li>
  </ul>
  
  <p>But as I expected, the animation desynchronise itself and I don't know how to make this on one timer only.</p>