CSS3动画接收器向后移动，然后向左移动

我目前正在尝试创建一个动画，使一个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
{
    50% {
        -webkit-transform: scale(.9);
        margin-left: 0;
   }
    100% {
       -webkit-transform: scale(.9);
        margin-left: -100px;
    }
}

---

谢谢我不知道我必须重述以前的动画。这实际上并没有达到我想要的效果（左边距在向左移动时会导致奇怪的大小调整问题）。使用translateX（）将其关闭。张贴最后的动画上面。

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