如何讓這個 animation 重演？

Question

這個 animation 完全按照我想要的方式工作，但我是 JS/jQuery 新手，我不確定如何循環我的 animation 所以它會無限繼續。 這里也是 CodePen 的鏈接。 提前致謝！ 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

使用 CSS 關鍵幀和 jQuery 切換 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 鏈接https://codepen.io/azhkuro/pen/GRoOqoq