CSS3 Animation + @keyframe run till the end

Question

I can't find the way to play an animation till the end when an element is :hover.

• When i :hover out, the animation reset - but i want it to continue till the end.
• JsFiddle

<div class="picture"></div>

    .picture:hover {
       -webkit-animation:swing 1s ease-in-out;
    }


    @-webkit-keyframes swing {
      [...] 
    }

Answer 1

I did like this http://jsfiddle.net/Z5aq7/

Instead of Hovering, I just made it a class (.animate) and adding the class on hover

$('.picture').hover(function(){
    $(this).addClass('animate');
});

Hope this helps!

Answer 2

Probably not a complete solution, but add the following to your picture class:

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

JsFiddle: http://jsfiddle.net/5SueS/4/

Answer 3

Seems that there is no pure css solutions, so best solution with JS:

Stackoverflow - animation on hover force entire animation