title: How to make this animation repeat itself?
body: <p>This animation is working exactly how I want it to, but I'm a JS/jQuery newbie and am unsure how to loop my animation so it continues infinitely. Here is a link to a CodePen as well. Thanks in advance! <a href="https://codepen.io/summeropratt/pen/qBbVdpQ" rel="nofollow noreferrer">https://codepen.io/summeropratt/pen/qBbVdpQ</a></p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;body&quot;&gt;
      &lt;div class=&quot;seven-flex-grid&quot;&gt;
        &lt;div class=&quot;col child-seven&quot;&gt;
            &lt;img draggable=&quot;false&quot; src=&quot;https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col child-seven&quot;&gt;
            &lt;img draggable=&quot;false&quot; src=&quot;https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col child-seven&quot;&gt;
            &lt;img draggable=&quot;false&quot; src=&quot;https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col child-seven&quot;&gt;
            &lt;img draggable=&quot;false&quot; src=&quot;https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col child-seven&quot;&gt;
            &lt;img draggable=&quot;false&quot; src=&quot;https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col child-seven&quot;&gt;
            &lt;img draggable=&quot;false&quot; src=&quot;https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col child-seven&quot;&gt;
            &lt;img draggable=&quot;false&quot; src=&quot;https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.body{
    max-width: 600px !important;
  }
  .seven-flex-grid {
    display: flex;
    z-index: 2;
    position: relative;
    max-width: 108rem;
  }
  .col {
    flex: 1;
    padding: 0px 24px;
    width: 20px;
  }
  .col img {
    width: 100%;
  }
  .child-seven {
    opacity: 0;
    transition: 1s;
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>$(document).ready(function() {
  var points = $(&quot;.child-seven&quot;);
      var queue = $.Deferred().resolve(); // create an empty queue
      points.get().forEach(function(li){
          queue = queue.then(function(){
             return $(li).animate({opacity: 100}, 1000).promise();
          })
      });
   });
  </code></pre>