CSS3動畫向後退回然後向左移動

Question

我目前正在嘗試創建一個動畫，使div看起來像它倒退一樣，然後（在完成後退後）被推到左側。

我現在正在使用CSS3，但我對動畫屬性不是非常熟悉，並且遇到了一些問題。目前我正在使用：

@-webkit-keyframes sinkBack 
{ 
    50% { 
     -webkit-transform: scale(.9); 
     margin-left: 0; 
    } 
    100% { 
     margin-left: -100px; 
    } 
} 

但是，其結果是，它縮小，然後在50％後，開始按比例縮小，同時推向左。我想讓它保持在比例（.9）的同時被推向左邊。

我也願意用jQuery做到這一點，但animate不支持轉換，我不想使用啓用這些動畫的插件之一。所以CSS3覺得這將是一個更好的選擇。

編輯

感謝祗園對他的幫助。下面的最終代碼（轉出保證金左）：

@-webkit-keyframes sinkBack /* Safari and Chrome */ 
{ 
50% { 
    -webkit-transform: scale(.9); 
} 
100% { 
    -webkit-transform: translateX(-100px) scale(.9); 
} 
} 

Answer 1

保持比例：

@-webkit-keyframes sinkBack 
{ 
    50% { 
     -webkit-transform: scale(.9); 
     margin-left: 0; 
    } 
    100% { 
     -webkit-transform: scale(.9); 
     margin-left: -100px; 
    } 
}