title: How do I animate the changing of my <img>?
body: <p>I'm changing the image on one of my <code>&lt;img&gt;</code>'s every 2 seconds. What I want is for the current image to slide out to the left and the next one to slide in from the right using pure CSS/JS?(not JQuery).</p>
  
  <p>P.S: Im sure there is a similar question here somewhere but I'm new to web dev so I didnt know which keywords to use to bring up relevant answers.</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var imageID=1;
  function changeimage(every_seconds){
  //change the image
  
      if(imageID==1){
          //how do i animate this?
          document.getElementById("myimage").src="1.png";
          imageID++;
  
      }else if(imageID == 2){
  
          document.getElementById("myimage").src="2.png";
          imageID++;
  
      }else if(imageID == 3){
  
          document.getElementById("myimage").src="3.png";
          imageID = 1;
  
      }
  
  
  //call same function again for x of seconds
  setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
  }
  </code></pre>