WebKit转换错误的转换

Question

我正在尝试使用转换和转换/转换代码将两个图像从固定位置动画到侧面执行端。

它适用于Firefox/Chrome，但在iPhone和Safari等WebKit设备上表现异常。基本上动画在正确的地方结束，但过渡不是。

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

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

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

这里有一个演示： https://jsfiddle.net/0o8L1jg2/1/

在Safari上的形象去所有的客场对面，然后突然坚持到最后的位置（这恰好是正确的）。任何方式使转换在这里正确行事？

Answer 1

为webkit设备添加webkit前缀。

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