Javascript 动画结束侦听器不'；我不能正常工作

我的时间条上有一个带有CSS的动画，带有

id=“progress bar”

和动画类

.anim

。 动画是CSS：

@-webkit-keyframes myfirst {
  from {
    width: 100%;
    background-color: #86e01e;
  }
  to {
    width: 0%;
    background-color: #f63a0f;
  }
}

.anim {
-webkit-animation: myfirst 5s linear;
-webkit-animation-fill-mode: forwards;
}

我正在使用函数

reset（）

现在我希望在动画结束时执行函数

lose（）

。 我也尝试过多种使用animationend监听器的方法，但对我来说不起作用

var x = document.getElementById("progress-bar");
x.addEventListener('webkitAnimationEnd', function() { 
lose(); //whatever i type here doesn't work
}, false);

有什么想法吗？

试试这个解决方案：

x.addEventListener('animationend', lose(), false);
x.addEventListener('webkitanimationend', lose(), false);

---

@哈奇，我想你不明白我想做什么。我想在动画结束时执行一个javascript函数。好的，可以使用jquery吗？

x.addEventListener('animationend', lose(), false);
x.addEventListener('webkitanimationend', lose(), false);