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

@minitech as in the rotate effect to the element instead of the class ? — Patsy Issa
– Patsy Issa, Commented Mar 3, 2014 at 20:25
Couldn't you just add a play state with JS? developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state — Paulie_D
– Paulie_D, Commented Mar 3, 2014 at 21:15
@Paulie_D the animation is infinite, how is this relevant to detecting when the window is loaded and finish the last iteration ? — Patsy Issa
– Patsy Issa, Commented Mar 3, 2014 at 21:39

bjb568 · Accepted Answer · 2014-03-03 20:28:54Z

2

_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);

answered Mar 3, 2014 at 20:28

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Patsy Issa Over a year ago

It no longer calls introLogo(); I m guessing animationiteration isn't working, i tried the vendor prefix variants and transitionend still nothing.

user757095 Over a year ago

@PatsyIssa i modified your fiddle as stated in this answer, and it DO work

Patsy Issa Over a year ago

@CrisimIlNumenoreano care to share said modified fiddle.

Patsy Issa Over a year ago

@bjb568 turns out it was the "webkitAnimationIteration" syntax, cheers.

bjb568 Over a year ago

@Patsy Oh. :P Those dern vendor prefixes. So unhelpful, yet so annoying.

Collectives™ on Stack Overflow

Finish CSS3 animation when document loaded

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related