Различные длительности различных свойств с использованием переходов/анимации 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?
Я в порядке с использованием анимации ключевого кадра, если это необходимо, но я не видел способа, которым они могут мне помочь.

jsfiddle for reference

Answer 1

Duratons могут быть разделены запятыми, соответствующих перешедших свойств, а именно:

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

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