title: How can I loop this animation forever?
body: <p>Good day to everyone. I am learning javascript. I know these codes I have written are not the best of codes. I am more interested in getting my codes to work at this stage. So, I have three images I setup in HTML and styled with css.</p>
  <p>I simply want the images to move to certain positions 3 seconds after page load and slide back to their initial positions 3 seconds interval. The problem now is that I will like to make this repeat every 3 seconds as long as the user is on the page. Here is what I have written:</p>
  <p>Currently, the images actually slide how I want them to but I don't know how to make this happen over and over again.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var section5slidersa = document.getElementById("section5slidersa");
  var section5slidersb = document.getElementById("section5slidersb");
  var section5slidersc = document.getElementById("section5slidersc");
  var interval = 2000;
  
  
  
  setInterval(() =&gt; {
    section5slidersa.style.left = " -500px";
    section5slidersb.style.left = "-500px";
    section5slidersc.style.left = "540px";
  
    setInterval(() =&gt; {
      section5slidersc.style.left = "1190px";
      section5slidersb.style.left = "0px";
      section5slidersa.style.left = " 0px";
    }, interval);
  
  
  }, interval);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .section5container{
  position: absolute;
  width: 80vw;
  height: 100vh;
  overflow: hidden;   
  }
  
  .section5slides{
  display: grid;
  grid-template-columns: 500px 500px 500px;
  gap: 20px;
  position: absolute;
  left: 210px;
  top: 170px;    
  }
  
   
  
  .section5sliders{
  background: #111924;
  height: 220px;
  }
  
     
  
  .section5sliders img{
  width: 200px;
  height: 180px;
  position: relative;
  top: 5px;   
  }
  
  .imgbg{
  background: #98ACB5;
  width: 190px;
  height: 180px;
  position: relative;
  top: 20px;
  left: 20px;
  }
  
  
  
  
  
  #section5slidersa {
    position: relative;
    left: 0px;
    transition: .8s ease-out;
  }
  
  #section5slidersb {
    position: relative;
    left: 0px;
    transition: .8s ease-out;
  }
  
  #section5slidersc {
    position: absolute;
    width: 500px;
    left: 1190px;
    transition: .8s ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section5container"&gt;
  &lt;div class="section5slides"&gt;
  &lt;div class="section5sliders" id="section5slidersa"
  &lt;div class="imgbg"&gt;&lt;img src="https://www.freeimages.com/photo/hand-in-
  action-aiming-1-1431523" id="section5imga" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="section5sliders" id="section5slidersb"&gt;
  &lt;div class="imgbg"&gt;&lt;img src="https://www.freeimages.com/photo/frog-on-
  chain-link-fence-1560508" id="section5imgb" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
     
  
    &lt;div class="section5sliders" id="section5slidersc"&gt;
  &lt;div class="imgbg"&gt;&lt;img src="https://www.freeimages.com/photo/chain-
  1446690" id="section5imgc" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>