brújula múltiples transiciones CSS

Question

¿Cómo se pueden hacer varias transiciones de CSS como esta Jsfiddle con Compass?

Lo que estoy tratando de hacer es escribir este código a continuación con Compass.

-webkit-transition: top 0.3s ease-out, background .9s .5s ease-out; 
    -moz-transition: top 0.3s ease-out, background .9s .5s ease-out; 
    -o-transition: top 0.3s ease-out, background .9s .5s ease-out; 
     transition: top 0.3s ease-out, background .9s .5s ease-out; 

Answer 1

¿Esto es lo que estás buscando? http://compass-style.org/reference/compass/css3/transition/#mixin-transition

@include transition(top 0.3s ease-out, background .9s .5s ease-out);

Answer 2

Si está utilizando un mixin para definir que la transición y se obtiene este error:

error: mixin transition only takes 1 arguments; given 2

tratar encerrando sus valores entre paréntesis como:

@include transition((bottom .5s, background 2s)); 

Answer 3

Desde el documentación:
http://compass-style.org/reference/compass/css3/transition/#mixin-transition

que podría haber cambiado con los años, pero ahora es así:

single-transition($property, $duration, $function, $delay) 

cuenta del retraso $ es pasado, no como en la respuesta correcta donde es anterior al último.