webkit translateX animation is rolling back to initial position

Question

I am trying to do a images gallery for mobile webkit,

The only way it is actually fast enough is using the hardware accelerated translateX .

My problem is that

Answer 1

I was able to make it work by adding a "display:none" style on the finish of the animation. Use the following CSS:

.paused {
    -webkit-animation-play-state: paused;
}

.hiddendiv {
    display:none;
}

Then in your jQuery code:

$('div.sideimage').click(
    function () {
        $(this).removeClass("paused").delay(2000).queue(
            function(next) {     
                $(this).addClass("hiddendiv");     
                next();
            }
        ); 
    }
);

Should work!