Finish CSS3 animation when document loaded

Question

I have the following infinite animation running from the start that acts as a page loader:

@-webkit-keyframes spinX {
    100% {
        -webkit-transform:rotate(360deg);
    }
}

And on window load i m running the following JS:

window.onload = function(){
    var _logo_x = document.getElementById("logo-x");
    _logo_x.addEventListener("animationiteration", introLogo(_logo_x), false);
}
function introLogo(_ele)
{
  _ele.removeClass('rotate');
}

The problem that i m facing is that it cuts the current iteration instead of waiting for it. Fiddle

Answer 1

_logo_x.addEventListener("animationiteration", introLogo(_logo_x), false);

Is equivalent to:

introLogo(_logo_x);
_logo_x.addEventListener("animationiteration", undefined, false);

You want:

_logo_x.addEventListener("animationiteration", function() {introLogo(_logo_x)}, false);