Multiple instances of transition property among classes used on a single element

Question

Fiddle: http://jsfiddle.net/X2s6W/

CSS:

div{
    background: green;
    width: 100px;
    height: 100px;
    transition: background 0.5s
}
div.one{
    background: red
}
div.two{
    height: 200px;
    transition: height 0.5s    
}

JS:

setInterval(function(){
    if($("div.one").length > 0){
        $("div").removeClass("one").addClass("two");
    }else{
        $("div.two").removeClass("two").addClass("one");
    }
}, 1000);

Problem:

When going from one to two, only the height transitions, but the background doesn't.
When going from two to one, only the background transitions. but the height doesn't.
The behavior is identical in Chrome, Firefox, and IE10.

Question: Is there a way to combine these classes, or must the CSS be changed to accommodate this limitation? Thanks.

Answer 1

Try setting both the transition in both the rules.

div.one{
     background: red;
     transition: height 0.5s, background 0.5s; 
}
div.two{
    background: green;
    height: 200px;
    transition: height 0.5s, background 0.5s; 
}

Fiddle