Компас несколько переходов css

Как можно сделать несколько CSS-переходов, подобных этому Jsfiddle с Compass?

То, что я пытаюсь сделать, - это написать базовый код ниже с помощью 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;
3 19
css css3 sass css-transitions compass-sass

3 ответа:

Это то, что вы ищете? http://compass-style.org/reference/compass/css3/transition/#mixin-transition

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

48

Из документации:
http://compass-style.org/reference/compass/css3/transition/#mixin-transition

Это могло бы измениться с годами, но теперь это так: 

single-transition($property, $duration, $function, $delay)
Обратите внимание ,что $ delay является последним, а не таким, как в правильном ответе, где он находится перед последним.
-1

Если вы используете mixin для определения перехода, и вы получаете эту ошибку:

Ошибка: переход mixin принимает только 1 аргумент; дано 2

Попробуйте заключить ваши значения в скобки, например: 

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