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

Guillaume's answer is great. However, if you are looking for hardware acceleration, you must let the webkit engine know you want 3D rendering (what makes hardware acceleration active).

According to http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, this is done by adding translateZ(0) to your rule, like so:

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%) translateZ(0);
}

Follow Guillaume's advice beyond that.