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

【动画监听，做多个点闪烁并反向】今天有个动画需求，多个点依次点亮，然后反向依次熄灭

文章图片
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