title: Animation not working when adding class to hide div
body: <p>I'm trying to animate the div when the user clicks on the close button, so far the button adds a class that hides the div and then should run the animation that is set but it doesn't it simply closes without the animation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.fa-info').click(function() {
    $('#pop-up-element').removeClass('hide');
    $('#pop-up-element').addClass('show');
  });
  
  
  
  $('.fa-times-circle').click(function() {
    $('#pop-up-element').addClass('hide');
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    
    margin: 0px;
    
  }
  
  .fa-facebook-square {
    
    color: #2D2D2D;
    transition: 0.5s;
  }
  
  .fa-facebook-square:hover {
    
    color: #3B5998;
    padding-left: 6px;
  }
  
  
  .fa-envelope {
    
    color: #2D2D2D;
    transition: 0.5s;
  
  }
  
  .fa-envelope:hover {
    
    color: white;
    padding-left: 3px;
  
  }
  .fa-info {
    
    padding-left: 15px;
    color: #2D2D2D;
    transition: 0.5s;
  }
  
  
  .fa-info:hover {
    
    padding-left: 20px;
    color: white;
    
  }
  
  .info-bar {
    
    float: left;
    width: 55px;  
    margin-top: 60px;
    background-color: #C0995D;
    padding-left: 10px;
    border-radius: 6px
  }
  
  #pop-up-element {
    width: 700px;
    height: 400px;
    background-color: #1e1e1e;
    border-radius: 40px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    text-align: center;
   display: none;
  
  }
  
  #pop-up-element.show {
    
    
    display: flex;
    animation: info 900ms ease-in-out both;
    
  
  
  
  }
  
  
  @keyframes info {
    
    0% {
      
      opacity: 0;
      
    }
    
    50% {
      
       transform: scale(1.1) rotate(9deg) translateX(0px);
  
      
    }
    
    
  }
  
  
  .close {
    
  position: absolute;  
  left: 635px; 
  top: 5px;
  }
  
  .fa-times-circle {
    
    color: white;
    transition: 0.5s;
  }
  
  .fa-times-circle:hover {
    
    color: #e2e2e2;
  }
  
  #pop-up-element.hide {
    
   display: none; 
   animation: info-out 900ms ease-out both;
  
  }
  
  @keyframes info-out {
    
    0% {
      
      opacity: 0;
      
    }
    
    50% {
      
     transform: scale(0.0) rotate(9deg) translateX(0px);
  
      
    }
    
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="info-bar"&gt;
  &lt;i class="fa fa-facebook-square fa-3x" aria-hidden="true" alt="Find us on Facebook"&gt;&lt;/i&gt;
  &lt;i class="fa fa-envelope fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
  &lt;i class="fa fa-info fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
  
  &lt;/div&gt; 
  
  &lt;div id="pop-up-element"&gt;
    &lt;div class="close"&gt;&lt;i class="fa fa-times-circle fa-4x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>