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

Question

I've been working on this all day as part of a much larger self-project and have come across a slight problem: http://jsfiddle.net/GYv22/2/

I am trying to change the speed of the ball on the fly using the faster/slower buttons. This used to remove the current CSS animation style (with the old speed), however I found it works as expected without doing this, and now just appends a new style (with the new speed), the animation is using keyframes utilising the translate3d property. Not sure if this is the best way to do it, but I thought it was better suited than using classes as I am dynamically changing the 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 as expected in Firefox (albeit slightly jittery, but speed changes are in real-time i.e. when you click the buttons the ball gets faster/slower!), in Chrome I have to leave the tab and return to see the speed change (???), and in IE 10 the ball animation works, but there is no speed change at all, even when leaving/returning to the tab or in real time.

I think the issue is that the animation style is being appended to #horizontal, and I also want it to affect its child element, #ball. This is necessary for future styling changes I am adding, as I want to have other elements moving alongside the ball at the same speed, all moving within 'horizontal'. However, it seems that the child element is not being updated property e.g. until I leave the tab and return. In chrome if I use 'Inspect Element' to inspect the ball directly, the div outline which appears when hovering over the code for #ball is moving independently of the ball on screen!

Any ideas? I am new to using jQuery and this is really frustrating :>

EDIT: I think it's an issue with translate3d and Chrome not using the GPU by default, set in about:flags. I will test and post an update.

EDIT: Update: http://jsfiddle.net/GYv22/3/

It would appear to work using -webkit on Chrome with translate rather than translate3d. This is a shame, and feels like a rather hacky method as the tutorial I was following recommended translate3d for 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 at about:flags, but this did not solve my issue either. At least this seems to be a temporary workaround. I also found a solution about adding/removing the animation from child elements directly here, just in case this is of use to anyone else: webkit translate3d issues (peek-thru) but I'm not sure how to implement that for my repeating animation.

Answer 1

For Chrome, try to push new speed by pause and re-run it 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');