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-animation-play-state", "running");     }); 

Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -