CSS3 动画向后下沉然后向左移动

Question

我目前正在尝试创建一个动画，使 div 看起来好像向后下沉，然后(完成后退)被推到左边。

我现在正在使用 CSS3，但我对动画属性不是很熟悉并且遇到了一些问题。目前我正在使用:

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

虽然这样做的结果是它缩小了，然后在 50% 之后开始缩小，同时被向左推。我希望它在向左推时保持在 scale(.9)。

我也愿意用 jQuery 做到这一点，但 animate 不支持转换，我不想使用启用这些动画的插件之一。所以 CSS3 感觉它会是一个更好的选择。

编辑

感谢 gion 的帮助。下面的最终代码(切换出 margin-left):

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