The transition does not work when you switch from no display to blocking

advertisements

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/


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