Transition not working when changing from display none to block

Question

I've noticed that transition is not working when the element is also changing from display none to block. Why is that? It works if I remove the display attribute.

CSS:

#box {
    width: 150px;
    height: 150px;
    background: red;
    transform: scale(0);
    display: none;
    transition: transform .5s;
}
    #box.active {
        transform: scale(1);
        display: block;
    }

http://jsfiddle.net/640kL55u/

Answer 1

Because it has display: none to begin with, the other styles are not being taken into the dom to be transitioned once display: block is added.

Instead, you can hide the div with height, so its still on the page but not showing. Then add the height on the show div.

JS Fiddle