title: add animation to javascript using css
body: <p>I am using the below code to add animation to the slideshow using css. But the animation is applied only to the first image and not to other images. how do I add the transition to other images as well using css only?</p>
  
  <pre><code>&lt;html&gt;
      &lt;style&gt;
          #slideshow{width:310;height:210;border-style:solid;}
          #imge{
              position:absolute;left:15;top:15;
              animation:myfirst 3s;}
          @keyframes myfirst
          {
              from {width:0;}
          to {width:300;}
          }
  
          @-webkit-keyframes myfirst /* Safari and Chrome */
          {
              from {width:0;}
          to {width:300;}
          }
  
      &lt;/style&gt;
      &lt;body&gt;
          &lt;div id="slideshow"&gt;
              &lt;img id="imge" src="img1.jpg" height="200" width="300"&gt;
          &lt;/div&gt;
          &lt;script&gt;
              var count=1;
              mf();
              function mf()
              {
                  document.getElementById("imge").src="img"+count+".jpg";
  
                  if(count&lt;3)
                      count++;
                  else
                      count=1;
                  setTimeout("mf()",3000);
              }
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>