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 the div take back its initial position at the end of the animation. I add the slideGalLeft class cliking on the left button. to the animated div

You can see an example here, in the callback events section: http://position-absolute.com/jqtouch/demos/main/#home

    .slideGalLeft {
    -webkit-animation-name: slideColis;
}


@-webkit-keyframes slideColis {
    from { -webkit-transform: translateX(0%); }
    to { -webkit-transform: translateX(-100%); }
}

Answer 1

Do not use webkit animation for this as it comes back to the default values once played. Instead define

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

and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly