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