javascript - How to override CSS3 animation with jQuery? -
i have animation on couple of elements last few seconds. when hover on 1 of them, want css3 animation pause , something, , when hover comes off, continue animation. here quick example fiddle shows css3 animation happening, , when hover on third bar (with class .test) should override css: http://jsfiddle.net/tmffx/ @keyframes animation { { width: 0;} {width: 200px;} } @-webkit-keyframes animation { { width: 0;} {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 this? hope help. $('.test').hover( function(){ $('div').css("-webkit-animation-play-state", "paused"); //do stuff here }, function(){ $('div').css("-webkit-anima...