我目前正在尝试创建一个动画,使 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);
}
}
最佳答案
保持规模:
@-webkit-keyframes sinkBack
{
50% {
-webkit-transform: scale(.9);
margin-left: 0;
}
100% {
-webkit-transform: scale(.9);
margin-left: -100px;
}
}
关于CSS3 动画向后下沉然后向左移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14001549/