html - 使用 WebKit 过渡/动画的不同属性的不同持续时间

Question

我正在使用 WebKit 过渡来为某些 CSS 更改设置动画。
例如，假设我有一个红色框，当有人悬停时我想将其更改为绿色。我用这个：

-webkit-transition-duration: 200ms;
-webkit-transition-property: background;
-webkit-transition-timing-function: ease;

这很好用。但是现在，说我希望它也向下滑动一点。我用这个：

-webkit-transition-property: background, margin;

这也可以，但我希望盒子快速滑下（比如 50 毫秒）。我无法更改-duration，因为这会使颜色动画快速。

如何为 CSS 动画中的不同属性分配不同的持续时间？
如有必要，我可以使用关键帧动画，但我还没有看到他们可以帮助我的方法。

score 6 · Accepted Answer

Duratons 可以用逗号分隔，对应于转换后的属性，即：

-webkit-transition-duration: 50ms, 200ms;
-webkit-transition-property: margin, background;

1 回答 1