Question

I have a div element and I want that when I go over it Its background change and its internal span change colour. If I use one transition for example only background works, else doesn’t work the transition is immeditate without delay. here is my styles.less code:

.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

Combine the transitions into one:

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