使用 WebKit 过渡/动画为不同属性提供不同的持续时间
我正在使用 WebKit 过渡来动画某些 CSS 更改。
例如，假设我有一个红色框，当有人悬停时我想将其更改为绿色。我用这个：
-webkit-transition-duration: 200ms;
-webkit-transition-property: background;
-webkit-transition-timing-function: ease;
效果很好。但现在，假设我也希望它向下滑动一点。我用这个：
-webkit-transition-property: background, margin;
这也可以，但我希望盒子快速向下滑动（比如 50 毫秒）。我无法更改 -duration 因为这会使颜色动画更快。
如何为 CSS 动画中的不同属性分配不同的持续时间？
如有必要，我可以使用关键帧动画，但我还没有看到它们可以帮助我的方法。
I'm using WebKit transition to animate certain CSS changes.
For example, say I've got a red box that I want to change to green when someone hovers. I use this:
-webkit-transition-duration: 200ms;
-webkit-transition-property: background;
-webkit-transition-timing-function: ease;
That works great. But now, say I want it to also slide downwards a bit. I use this:
-webkit-transition-property: background, margin;
That also works okay, but I want the box to slide down quickly (say 50ms). I can't change -duration because that would make the color animate fast.
How can I assign different durations to different properties in CSS animations?
I'm fine with using keyframe animations if necessary, but I haven't seen a way that they can help me.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Duratons 可以用逗号分隔，对应于转换后的属性，即：
http://jsfiddle.net/bQ8d7/1/
Duratons can be comma-separated, corresponding to the transitioned properties, ie:
http://jsfiddle.net/bQ8d7/1/