title: CSS Transition Fading out but not in
body: <p>I am trying to make a div that behaves as follows:</p>
  
  <p>When the form input comes into focus, I want the background to become a dark overlay except the form which stays bright. When the form loses focus, I want the overlay to go away.</p>
  
  <p>I have both of these working but I want the appearing and disappearing of the overlay to fade in and out. I tried doing this using transitions and it works for the losing focus part not for the gaining focus part; it doesn't fade in but rather just appears. I have no idea why. Could someone explain why this is happening and also what might be a better way to go about doing this.</p>
  
  <p>Note: This won't work on Safari and I only care to make it work for Chrome right now. Also, I would rather not use JQuery so please limit your answers to raw js.</p>
  
  <p><a href="https://jsfiddle.net/31g18rqm/" rel="nofollow noreferrer">Here</a> is a JSFiddle. </p>
  
  <pre><code> `
  </code></pre>