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

Question

我有一个 div 元素，当我浏览它时我想要它的背景变化和它的内部跨度改变颜色。例如，如果我使用一种转换，则只有背景工作，否则不起作用，转换立即立即生效。这是我的 style.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; 
}