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%); }
}

score 14 · Accepted Answer · answered May 31 '10 at 23:23

14

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

answered May 31 '10 at 23:23

Guillaume Esquevin

2,992
20
25

1

you can use animation fill-mode to keep the animation at the last position (although you should really be using transition for a permanent one step change) – Michael Mullany Jan 21 '11 at 20:20
You are definitely right about fill-mode property. I did not know it at the time of my answer. – Guillaume Esquevin Nov 21 '13 at 10:23
I tried overflow-x: hidden; on both the body and html that dident work for safari -webkit-transform: translateX(0%); worked many thanks! :) – Feb 01 '14 at 16:41

score 5 · Answer 2 · answered May 29 '11 at 06:21

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.

score 4 · Answer 3 · edited May 18 '13 at 18:03

4

Use:

-webkit-animation-fill-mode: none/backwards/forwards/both;

This allows you to define at what end of your animation the element remains when the animation is finished.

edited May 18 '13 at 18:03

Aaron

2,482
1
26
56

answered Mar 26 '12 at 09:42

hallodom

6,429
1
23
19

score 2 · Answer 4 · edited Mar 09 '11 at 01:26

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!

webkit translateX animation is rolling back to initial position

4 Answers4

Linked