CSS3 Animation + @keyframe run till the end

问题

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 {
      [...] 
    }

回答1:

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/

回答2:

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!

回答3:

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

Stackoverflow - animation on hover force entire animation

来源：https://stackoverflow.com/questions/16765727/css3-animation-keyframe-run-till-the-end