Igor Houwat Igor Houwat - 11 months ago 38
CSS Question

Problems animating a button w/jQuery: doesn't hide

Everything works pretty well in this animation till the last bit. I've included the jQuery for reference and a link to the pen http://codepen.io/houwat/pen/BLNdAo

When I click on the second button, the text area comes out animated. When I click on the text area to close it up, it does a final "appear" before disappearing completely. I tried to add an opacity property in the closing animation (CSS file), but it doesn't seem to be enough. Any ideas?


$('#button2d').click(function() {

$('.price_description').click(function() {
$('#button3d').fadeIn('slow', function() {
$('.price_description').css('display', 'none');

Answer Source

Add to the .swiftin class animation-fill-mode: forwards; in order to stop your animation on the last frame:

.swiftin {
  animation: swiftin 0.5s;
  animation-fill-mode: forwards;