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:
@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-animation-play-state", "running"); });
Comments
Post a Comment