CSS轉換：在平移左邊緣的同時修復div的右邊緣位置

Question

我試圖使用CSS3轉換爲DIV設置動畫效果。該示例DIV是：

HTML：

<div class="element"></div> 

CSS：

.element { 
    -webkit-transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 2s linear, width 2s linear; 
    position: absolute; 
    left: 100px; top: 100px; 
    height: 10px; width: 50px; 
    background-color: black; 
} 

這意味着DIV在其容器佔據的區域從（100像素，100像素）至（150像素，110px） - 右邊緣固定在150px。

我想在DIV到150像素維持一個靜態的右邊緣，而我翻譯關閉屏幕左邊緣，所以我一直在申請（通過JavaScript）的過渡類的DIV像這樣：

CSS：

.transition { 
    -webkit-transform: translate3d(-200px, 0, 0); 
    width: 150px; 
} 

是我看到的問題是，在寬度的過渡不與翻譯DIV的左邊緣跟上，所以不是在大小和左側位置均勻增加，右邊緣當DIV以不同的速率滑落時，位置波動，稍微閃爍（取決於平臺有多少閃爍）。

移動Safari（iPhone上的Phonegap webview是我的主要開發平臺）上發生的問題更爲生動，而不是在Chrome上。

我已經把一個JSFiddle放在http://jsfiddle.net/XwuBz/上，它演示了它（在iPhone上查看它以查看它的發生）。

是否有另一種方法來實現這一最終結果？

由於提前，

丹

Answer 1

嗯，看來iOS的Safari瀏覽器與轉換一些奇怪的問題/變換。

我試圖實現與jQuery的唯一相同的結果，它的工作適用於iPhone 4s，iOS6的：

$('.element').animate({left:'-=200','width':'+=200'},2000); 

這裏是一個demo。