每次點擊就觸發一次css3動畫，只生效第一次的解決辦法

每次動畫播放完成后清空一次animation

 

HTML

<div class="one">

　　<div class="oneimg oneimgfir" id="oneimg"></div>

</div>

 

CSS

.one{
width: 25%;
float: left;
width: 400px;
height: 352px;
}
.oneimg{
width: 400px;
height: 352px;
background-image: url('jsimg/11.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.oneimgfir{
animation: go-imgtwo 1s ease 3s both;
}
@keyframes go-imgtwo{
from{
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
transform:rotateY(0deg);
opacity: 0;
}
to{
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
transform:rotateY(360deg)
opacity: 1;
}
}
@keyframes go-im{
from{
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
transform:rotateY(0deg);
opacity: 0;
}
to{
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
transform:rotateY(360deg)
opacity: 1;
}
}

 

JS

$('.gomo div span:nth-child(2)').on('click',function(){  
　　$('.oneimg').removeClass('oneimgfir');
　　$('.oneimg').css('animation','go-im 1s ease 0.5s forwards running');
　　setTimeout(function(){
　　　　$('.oneimg').css('animation','none');
　　},1500);
})