title: Animate div to full screen size from current position on click, click again to animate back to original size
body: <p>I'm trying to emulate this general effect... <a href="http://www.wolfks.com/about/brand-promises#" rel="nofollow noreferrer">http://www.wolfks.com/about/brand-promises#</a></p>
  
  <p>So far I have this... <a href="https://jsfiddle.net/nqjcs66x/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code> $(document).ready(function(){
      $('.people-container').click(function() {
        if ($(this).hasClass('close-animate') || !$(this).hasClass('screen-animate')) {
          $(this).removeClass('close-animate').addClass('screen-animate');
        } else {
          $(this).removeClass('screen-animate').addClass('close-animate');
        }
      });
  });
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>body, html {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  .people-title {
    text-align: center;
    padding: 25px;
  }
  
  .people-container {
    background: gray;
    margin-top: 10px;
    width: 100%;
    height: 100px;
    position: relative;
  }
  
  .screen-animate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    animation: fill-animate 0.5s forwards;
  }
  
  .close-animate {
    position: relative;
    width: 100%;
    height: 100px;
    animation: close-animate 0.5s;
  }
  
  /** Fill screen animation **/
  @keyframes fill-animate
  { 
      50% { 
          width: 100%;
          left: 0;
          height: 50%;
      }
      100% {
          height: 100%;
          width: 100%;
          top: 0;
          left: 0;
      }
  }
  
  /** Close screen animation **/
  @keyframes close-animate
  { 
      50% { 
          width: 100%;
          height: 50%;
      }
      100% {
          height: 100px;
          width: 100%;
      }
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="people-container" style="background-color: red;"&gt;
  
    &lt;div class="people-title"&gt;
      &lt;h1&gt;Carpenter&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div class="close-btn"&gt;&amp;#10006;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm having trouble getting the div to smoothly scale up to full screen. I dont need it to be exactly like the example... basically just looking for the full screen animation and closing animation from and to the div's original position on the page. </p>
  
  <p>Any help?</p>