Animation End Listener не работает должным образом

Question

У меня есть анимация с 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()

function reset() { 
document.getElementById("progress-bar").className = ""; 
setTimeout(function(){document.getElementById("progress-bar").className = "anim";},1); 
} 

Теперь я хочу, чтобы функция lose() должна быть выполнена, когда анимация заканчивается. Я также попытался несколько вещей с animationend слушателей, но это не работает для меня ...

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

Есть идеи?

Answer 1

Попробуйте это как исправить:

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