为什么圈子并不总是出现在这个JS动画中？

Question

所以我想要使用这个脚本，非常简单。我无法确定问题，但是圈子应该连续不断地出现，但是如果你继续观看它，一些圈子就不会显示出来。他们正在创建，但只是没有显示前端。有什么想法吗？

＆＃13;

＆＃13;

counter = 0;
  
function createCircle(){
  
  $("body").append("<div class='circle'></div>");
    
  // add "zoom" class
  setTimeout(function(){
      $(".circle:last-child").addClass("zoom");
  },10);
  
  // Remove circle
  setTimeout(function(){
      $(".circle:first").remove();
  },3000);
  counter++;
}

setInterval(function(){
    createCircle();
},500);

＆＃13;

.circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 3px solid #000;
  -webkit-transition: all 2s linear;
  -webkit-transform: scale(0.1);
  position: absolute;
  top: 0;
  left: 0;
}

.circle.zoom {
  opacity: 0;
  -webkit-transform: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;