Animation not working when adding class to hide div

Question

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.

$('.fa-info').click(function() {
  $('#pop-up-element').removeClass('hide');
  $('#pop-up-element').addClass('show');
});



$('.fa-times-circle').click(function() {
  $('#pop-up-element').addClass('hide');

});

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);

    
  }
  
  
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-bar">
<i class="fa fa-facebook-square fa-3x" aria-hidden="true" alt="Find us on Facebook"></i>
<i class="fa fa-envelope fa-3x" aria-hidden="true"></i>
<i class="fa fa-info fa-3x" aria-hidden="true"></i>

</div> 

<div id="pop-up-element">
  <div class="close"><i class="fa fa-times-circle fa-4x" aria-hidden="true"></i></div>
</div>

Answer 1

This is happening because your .hide class is setting your popup to display: none; before it even runs the animation. Transition the animation to opacity: 0; and then set the display to none once the animation is complete.

CSS

#pop-up-element.hide {
  display: none; /* <-- Remove This */
  animation: info-out 600ms ease-out both;
}

@keyframes info-out {
  100% {
    transform: scale(0.0) rotate(9deg) translateX(0px);
    opacity: 0;
    display: none;
  }
}

JSFiddle

$('.fa-info').click(function() {
  $('#pop-up-element').removeClass('hide');
  $('#pop-up-element').addClass('show');
});



$('.fa-times-circle').click(function() {
  $('#pop-up-element').addClass('hide');

});

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 {
  
 animation: info-out 600ms ease-out both;

}

@keyframes info-out {
  
  100% {
   transform: scale(0.0) rotate(9deg) translateX(0px);
   opacity: 0;
   display: none;
  }
      
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-bar">
<i class="fa fa-facebook-square fa-3x" aria-hidden="true" alt="Find us on Facebook"></i>
<i class="fa fa-envelope fa-3x" aria-hidden="true"></i>
<i class="fa fa-info fa-3x" aria-hidden="true"></i>

</div> 

<div id="pop-up-element">
  <div class="close"><i class="fa fa-times-circle fa-4x" aria-hidden="true"></i></div>
</div>