How to make this animation repeat itself?

Question

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! https://codepen.io/summeropratt/pen/qBbVdpQ

HTML

<div class="body">
    <div class="seven-flex-grid">
      <div class="col child-seven">
          <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
      </div>
      <div class="col child-seven">
          <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
      </div>
      <div class="col child-seven">
          <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
      </div>
      <div class="col child-seven">
          <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
      </div>
      <div class="col child-seven">
          <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
      </div>
      <div class="col child-seven">
          <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
      </div>
      <div class="col child-seven">
          <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
      </div>
    </div>
</div>

CSS

.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;
}

JS

$(document).ready(function() {
var points = $(".child-seven");
    var queue = $.Deferred().resolve(); // create an empty queue
    points.get().forEach(function(li){
        queue = queue.then(function(){
           return $(li).animate({opacity: 100}, 1000).promise();
        })
    });
 });

Answer 1

Make infinite loop using CSS keyframe and jQuery toggle class.

$(document).ready(function() {

  setInterval(function(){ 
     // toggle class every 4 sec, total 1 loop + 500ms
     $('.seven-flex-grid').toggleClass('animating');  
     setTimeout(function(){
       // toggle class every 3.5 sec, 7 icon * 500ms
       $('.seven-flex-grid').toggleClass('animating');  
     },3500);

  },4000);

});

CodePen link https://codepen.io/azhkuro/pen/GRoOqoq