动画监听，做多个点闪烁并反向

今天有个动画需求，多个点依次点亮，然后反向依次熄灭

GIF.gif

一开始以为就是一个闪烁动画加反向，让我们实习的小a去做，但是小a说他坐起来有困难，我正想装一波大神，然而反打脸，这个和最初自己想的不一样，于是我找个借口，说，一会我写一个给你
好了，开始分析动画，一波分析下来，想着这一个动画肯定写不下来，怎么也要写两个，好啦，写两个动画，问题来了，两个动画怎么执行
css没办法控制，只有用js咯，js监听最后一个点的动画是否执行完，执行完了就执行下一个动画，依次反复，好了，忙活了一阵完成了，总算没有很打脸，
代码当然可以继续优化，那就给小a研究了，还有一大波项目等着我

.spinner {
  margin: 100px auto 0;
  width: 150px;
  text-align: center;
}
 
.spinner > div {
  width: 3px;
  height: 3px;
  background-color: #67CF22;
  border-radius: 100%;
  display: inline-block;
  margin:15px;
  
}
.b >div{
    animation:bouncedelay 1s ease-in-out 1 forwards;
}
.b .bounce1 {
  animation-delay: -.5s;
}
 
.b .bounce2 {
  animation-delay: 0s;
}
.b .bounce3 {
  animation-delay: .5s;
}

.c >div{
    animation:rotate-back 1s ease-in-out 1 forwards;
    transform: scale(6)
}
.c .bounce1 {
  animation-delay: 1s;
}
 
.c .bounce2 {
  animation-delay: 0.5s;
}
.c .bounce3 {
  animation-delay: 0s;
}
 
 
@keyframes bouncedelay {
  0%{
    transform: scale(1);
  } 
  100% {
    transform: scale(6);
  }
}
@keyframes rotate-back {
  0%{
    transform: scale(6);
  } 
  100% {
    transform: scale(1);
  }
}

var tt=document.querySelector('.bounce3')
    tt.addEventListener("webkitAnimationEnd",function(){
        $('.spinner').addClass('c')
        $('.spinner').removeClass('b')
    },false)
    var tta=document.querySelector('.bounce1')
    tta.addEventListener("webkitAnimationEnd",function(){
        $('.spinner').addClass('b')
        $('.spinner').removeClass('c')
    },false)

参考：https://www.cnblogs.com/a-cat/p/8477741.html