使用WebKit過渡/動畫的不同屬性的不同持續時間

Question

我正在使用WebKit過渡來爲某些CSS更改設置動畫。
例如，假設我有一個紅色框，當某人懸停時我想將它變成綠色。我使用這個：

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

這很好。但現在，我想讓它也向下滑動一點。我使用這個：

-webkit-transition-property: background, margin; 

這也行得通，但我想盒快速下滑（比如50ms）。我無法更改-duration，因爲這會使顏色動畫變得更快。

如何在CSS動畫中爲不同的屬性分配不同的持續時間？
如果有必要，我很好地使用關鍵幀動畫，但我還沒有看到他們可以幫助我的方式。

jsfiddle for reference

Answer 1

Duratons可以是逗號分隔的，對應於轉換特性，即：

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

http://jsfiddle.net/bQ8d7/1/