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