css3 - JQuery - on the fly CSS animation change only happens when I Ieave browser window and return -

i've been working on day part of larger self-project , have come across slight problem: http://jsfiddle.net/gyv22/2/

i trying change speed of ball on fly using faster/slower buttons. used remove current css animation style (with old speed), found works expected without doing this, , appends new style (with new speed), animation using keyframes utilising translate3d property. not sure if best way it, thought better suited using classes dynamically changing animation speed constantly.

function animate(x, y) {         $('#xspeed').html(x);         $('#yspeed').html(y);          var horizontalcss = 'updown ' + y + 's infinite linear';         var ballcss = 'leftright ' + x + 's infinite linear';          $('#horizontal')             .css('-webkit-animation', horizontalcss) /* chrome */             .css('-moz-animation', horizontalcss) /* firefox */             .css('animation', horizontalcss); /* ie */          $('#ball')             .css('-webkit-animation', ballcss)             .css('-moz-animation', ballcss)             .css('animation', ballcss);     } 

this works expected in firefox (albeit jittery, speed changes in real-time i.e. when click buttons ball gets faster/slower!), in chrome have leave tab , return see speed change (???), , in ie 10 ball animation works, there no speed change @ all, when leaving/returning tab or in real time.

i think issue animation style being appended #horizontal, , want affect child element, #ball. necessary future styling changes adding, want have other elements moving alongside ball @ same speed, moving within 'horizontal'. however, seems child element not being updated property e.g. until leave tab , return. in chrome if use 'inspect element' inspect ball directly, div outline appears when hovering on code #ball moving independently of ball on screen!

any ideas? new using jquery , frustrating :>

edit: think it's issue translate3d , chrome not using gpu default, set in about:flags. test , post update.

edit: update: http://jsfiddle.net/gyv22/3/

it appear work using -webkit on chrome translate rather translate3d. shame, , feels rather hacky method tutorial following recommended translate3d gpu power.

 @-webkit-keyframes leftright {     0%, 100% {         -webkit-transform: translate(0px, 0);      }     50% {         -webkit-transform: translate(545px, 0);     } } @-webkit-keyframes updown {     0%, 50%, 100% {         -webkit-transform: translate(0, 0);     }     25% {         -webkit-transform: translate(0, 150px);     }     75% {         -webkit-transform: translate(0, -135px);     } } 

i tried enabling gpu settings on chrome @ about:flags, did not solve issue either. @ least seems temporary workaround. found solution adding/removing animation child elements directly here, in case of use else: webkit translate3d issues (peek-thru) i'm not sure how implement repeating animation.

for chrome, try push new speed pause , re-run again after setup new speed.

  $('#horizontal')         .css('-webkit-animation', horizontalcss) /* chrome */         .css('-moz-animation', horizontalcss) /* firefox */         .css('animation', horizontalcss); /* ie */    $('#ball')         .css('-webkit-animation', ballcss)         .css('-moz-animation', ballcss)         .css('animation', ballcss);    $('#horizontal,#ball').css('-webkit-animation-play-state', 'paused');   $('#horizontal,#ball').css('-webkit-animation-play-state', 'running');