Can't stop animation at end of one cycle [duplicate]

Answer 1

The css3 animations reset to the default style at the end of the animation. You can try something with javascript:

You can add an eventListener to your animation, retrieve the styles you wish to keep, apply them manually and remove the animation.

document.getElementById('yourdiv').addEventListener(
    'webkitAnimationEnd',
    function(){
        document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
        document.getElementById('yourdiv').style.webkitAnimationName = 'none';
    }, 
    false
);

Answer 2

Just in case your animation still resets to the first frame, be careful with the order in which you declare the css:

This is working fine:

    animation: yourAnimationName 1s;
    animation-fill-mode: forwards;

This won't (reset to first frame):

    animation-fill-mode: forwards;
    animation: yourAnimationName 1s;

Tricky!

Answer 3

try this:

-webkit-animation-duration: 10s, 10s;

:)

Answer 4

If I understand the question correctly, it sounds like you need to set the iteration to '1'.

-webkit-animation-iteration-count: 1;

Answer 5

The following comment worked for me. Thanks michael

"You need to add the fill-mode to freeze the animation state at the end of the animation.

-webkit-animation-fill-mode: forwards;

forwards leaves the animation in the state of the last frame

backwards leaves the animation at the start