css - styles.less 在 div 上的两个过渡

Question

我有一个 div 元素，当我浏览它时，我希望它的背景发生变化，它的内部跨度也发生变化。如果我使用一个过渡，例如只有背景有效，否则不工作，过渡是立即进行的，没有延迟。这是我的 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

将转换合并为一个:

.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; 
}