WebKit Transform Wrong Transition

Question

I'm trying to animate two images from a fixed position to side-do-side, using transition and transform/translation code.

It works right on Firefox / Chrome but on WebKit devices like iPhone and Safari it acts oddly. Basically the animation ends on the right place, but the transition don't.

.anim div{
    transition: ease all 1s;
}

.anim div.transformed.a{
    transform: translate(150%, -11%);
}

.anim div.transformed.b {
    transform: translate(50%, -110%);
}

Here's a demo: https://jsfiddle.net/0o8L1jg2/1/

On Safari the image goes all the away across and then suddenly sticks to the final position (which happens to be right). Any way to make the transition acts correctly on here?

What if you try put the values in correct order (and avoid use all): transition: transform 1s ease; ? — Asons

cnrhgn cnrhgn · Accepted Answer · 2017-03-27T13:02:16

Add the webkit prefix for webkit devices.

   .anim div{
        transition: ease all 1s;
        -webkit-transition: ease all 1s;
    }

    .anim div.transformed.a{
        transform: translate(150%, -11%);
        -webkit-transform: translate(150%, -11%);
    }

    .anim div.transformed.b {
        transform: translate(50%, -110%);
        -webkit-transform: translate(50%, -110%);
    }

WebKit Transform Wrong Transition

1 Answers