css - 複数のcss遷移をコンパスします

Question

このJsfiddlewithCompassの ような複数のcss遷移をどのように行うことができますか？

私がやろうとしているのは、コンパスを使って以下のコードを基本的に書くことです。

-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

これはあなたが探しているものですか？http://compass-style.org/reference/compass/css3/transition/#mixin-transition

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

Answer 2

ドキュメントから:
http://compass-style.org/reference/compass/css3/transition/#mixin-transition

時代とともに変化しているかもしれませんが、現在は次のようになっています。

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

$delay が最後であることに注意してください。最後の前にある正解のようではありません。

Answer 3

mixin を使用してトランジションを定義している場合、次のエラーが発生します。

エラー: mixin トランジションは引数を 1 つしか取りません。与えられた 2

次のように値を括弧で囲んでみてください。

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