切换css名,修改class名切换动画的奇怪现象

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

页面中定义了两段动画，动画的dirction设置一个是正向一个是反向；让目标从0像素移动到300像素；通过点击div切换class名切换两个动画内容。然而，只有打开页面时会看到效果。之后点击div只能显示单帧不能显示动画效果；只有添加新的keyframes且动画都为正向才能产生效果，望各位大神答疑解惑。

.anime{

animation-name:a1;

animation-duration:1s;

animation-timing-function:ease-in-out;

animation-delay:0s;

animation-iteration-count:1;

animation-direction:normal;

animation-fill-mode:both;

}

div{position:absolute;width:100px;height:100px;}

@keyframes a1{

0%{left:0px;background-color:red;}

100%{left:300px;background-color:green;}

}

/*@keyframes a1b{

100%{left:0px;background-color:red;}

0%{left:300px;background-color:green;}

}*/

.animeback{

animation-name:a1;

animation-duration:1s;

animation-timing-function:ease-in-out;

animation-delay:0s;

animation-iteration-count:1;

animation-direction:reverse;

animation-fill-mode:both;

}

function init(){

console.log(document.head);

document.getElementById("p1").addEventListener("click",_c);

}

function _c(e){

if(e.currentTarget.getAttribute("class")=="anime"){

e.currentTarget.setAttribute("class","animeback");

}else{

e.currentTarget.setAttribute("class","anime");

}

console.log(e.currentTarget);

}