Javascript 让动画处于其结束状态JS/CSS

我的问题是：

我正在用JS和CSS开发一个小动画，我希望动画结束后停止。现在，我的动画回到他的基本状态

var
btn=document.getElementById（“btn”）；
anim=document.getElementById（“anim”）；
//按钮点击事件
btn.addEventListener（“单击”，ToggleAnimation，false）；
//应用所有webkit事件
anim.addEventListener（“webkitAnimationStart”，AnimationListener）；
anim.addEventListener（“webkitAnimationIteration”，AnimationListener）；
anim.addEventListener（“webkitAnimationEnd”，AnimationListener）；
//和标准事件
anim.addEventListener（“animationstart”，AnimationListener）；
anim.addEventListener（“animationiteration”，AnimationListener）；
anim.addEventListener（“animationend”，AnimationListener）；
//处理动画事件
函数AnimationListener（e）{
如果（e.type.toLowerCase（）.indexOf（“animationend”）>=0）{
ToggleAnimation（）；
}
}
//开始/停止动画
功能转换（e）{
变量on=（anim.className！=“”）；
anim.className=（开？“：“启用”）；
};
#动画
{
显示：块；
宽度：150px；
高度：150像素；
背景色：#060；
}
#动画启用
{
-webkit动画：flash1s轻松；
动画：flash 1s轻松；
动画填充模式：正向；
-webkit动画填充模式：正向；
}
/*动画*/
@-webkit关键帧flash{
50%{利润率最高：50px；}
}
@关键帧闪烁{
50%{利润率最高：50px；}
}

启动动画
我想我已经达到了您想要的效果-将动画更改为具有开始和结束状态（0%和100%），并使用jquery添加类“enable”，而不是切换它

css

jquery

$('#btn').click(function(){
   $('#anim').addClass("enable");
})

希望这会有帮助，做一个代码笔
是的，这正是我要找的！谢谢！在询问朋友后，他们也告诉我最好使用JQuery方法，它更简单，代码也更简单。
$('#btn').click(function(){
   $('#anim').addClass("enable");
})