CSS transition being ignored

Question

I'm trying to add some CSS transitions to a <div>, but I can't seem to get it working.

Basically, I have a sidebar that slides in (using a transition itslef, which works fine), and when that happens I place a <div> in front of the remainder of the page.

I'm trying to use transitions because I want the aforementioned <div> to appear as though it is always attached to the sidebar, but it's just showing in it's final position.

Am I missing anything here?

#modal{
    display:    none;
    left:       0;
    opacity:    0;
    width:      100%;
}
.mobile #modal.sidebarVisible{
    background-color:   #000000;
    display:            block;
    height:             100%;
    left:               271px;
    opacity:            0.5;
    position:           absolute;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
    -webkit-transition: left 5s linear, width 5s linear;
    transition:         left 5s linear, width 5s linear;
}

*Note that I'm only using 5s for the transition to test it's working, it'll be 0.3s in reality.

Answer 1

A css transition cannot be applied to a class that is transitioning from display: block; to display: none;

Using opacity or visibility can solve this problem.

Here's a JSFiddle example. The Circle is using a transition from display: block to display: none and the Square is using opacity.