css - styles.lessdivでの2つの遷移

Question

私はdiv要素を持っていますが、それを確認すると、背景が変化し、内部スパンの色が変化します。たとえば、1つのトランジションを使用する場合、バックグラウンドのみが機能しますが、それ以外の場合は機能しません。トランジションは遅滞なく即興です。これが私のstyles.lessコードです：

.transition{
    transition-property: color; /*standard*/
    transition-duration: 0.4s;

    -webkit-transition-property: color; /*Safari e Chrome */
    -webkit-transition-duration: 0.4s;

    -o-transition-property: color;      /*Opera*/
    -o-transition-duration: 0.4s;

    -moz-transition-property: color;    /*Firefox*/
    -moz-transition-duration: 0.4s; 
}

.transition_bg{
    transition-property: background; /*standard*/
    transition-duration: 0.4s;

    -webkit-transition-property: background; /*Safari e Chrome */
    -webkit-transition-duration: 0.4s;

    -o-transition-property: background;      /*Opera*/
    -o-transition-duration: 0.4s;

    -moz-transition-property: background;    /*Firefox*/
    -moz-transition-duration: 0.4s; 
}

.riquadri{
    background:#fff;
    width:230px;    
    height:230px;
    float:left;
    text-align:center;
    .transition_bg;
        .transition
}

.riquadri:hover{
    background:#575757;
}

.riquadri:hover span{
    color:#fff;
}

Answer 1

遷移を 1 つに結合します。

.transition{
    transition-property: color, background; /*standard*/
    transition-duration: 0.4s;

    -webkit-transition-property: color, background; /*Safari e Chrome */
    -webkit-transition-duration: 0.4s;

    -o-transition-property: color, background;      /*Opera*/
    -o-transition-duration: 0.4s;

    -moz-transition-property: color, background;    /*Firefox*/
    -moz-transition-duration: 0.4s; 
}