css - CSS3 Animation Sink Backwards 然后向左移动

Question

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

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

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

这样做的结果是它缩小了，然后在 50% 之后，在被推向左的同时开始放大。我希望它在被向左推时保持在比例（.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;
    }
}