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