如何使用jQuery覆盖CSS3动画？

Question

I have an animation on a couple of elements that last a few seconds. When you hover over one of them, I want the CSS3 animation to pause and do something, and when hover comes off, to continue animation.

Here is a quick example fiddle that shows the CSS3 animation happening, and when you hover over the third bar (with class .test) it should override the CSS:

http://jsfiddle.net/TmFFx/

  @keyframes animation {
    from { width: 0;}
    to {width: 200px;}
}

@-webkit-keyframes animation {
    from { width: 0;}
    to {width: 100%;}
}

div {
    animation: animation 3s;
    -webkit-animation: animation 3s; 
    display:block;
    height:50px;
    background:red;
    margin-bottom:20px;
}
.change {width: 50%;}

  $('.test').hover( function() {
        $(this).toggleClass('change'); 
});

Any ideas how to do this?

Answer 1

hope this will help.

  $('.test').hover(
      function(){
    $('div').css("-webkit-animation-play-state", "paused");
//do your stuff here

    },
      function(){
        $('div').css("-webkit-animation-play-state", "running");
    });

Answer 2

What about, just use CSS with transition ? (in your case)

div {
    display:block;
    width:100%;
    height:50px;
    background:red;
    margin-bottom:20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
div:hover {width:50%;}

Demo : http://jsfiddle.net/TmFFx/5/