title: Reverse CSS transition on uncheck
body: <p>I'm having a problem reversing a transform when an input is unchecked. As it currently stands the transition doesn't fire it just instantly reverts back to the pre-checked state. I've tried using :not(:checked) but that doesn't seem to be working either.</p>
  
  <p>You can see what I mean here:</p>
  
  <pre><code> .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition-property: opacity;
    transition-duration: 500ms;
    transition-delay: 500ms;
    transition-timing-function: ease-in-out;
    }
  
    .toggle:checked ~ .overlay {
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 2;
    transition-property: opacity;
    transition-duration: 500ms;
    transition-delay: 200ms;
    transition-timing-function: ease-in-out;
    }
  
    .toggle:not(:checked) ~ .overlay {
    transition-property: opacity;
    transition-duration: 500ms;
    transition-delay: 500ms;
    transition-timing-function: ease-in-out;
    }
  </code></pre>
  
  <p>Here is a pen where you can see the issue - <a href="http://codepen.io/anon/pen/VarVyP" rel="nofollow">http://codepen.io/anon/pen/VarVyP</a>. Any help or guidance is appreciated.</p>
  
  <p><strong>Edit</strong>
  I should have been clearer that the transition that is not reversing is the overlay opacity transition not the drawer push in transition. Unchecking the input moves the drawer back fine but the overlay just instantly reverts to pre-checked state without a transition.</p>