CSS Animation, working adding class, but not removing the class

Question

I've got this keyframe

@keyframes jump {
  25% {
    transform: translate3d(0, 0px, 0);
  }
  75% {
    transform: translate3d(0, 10em, 0);
  }
  100% {
    transform: translate3d(0, 17.5em, 0);
  }
}

Then I have this class

.close.form_open {
  animation: jump .5s forwards linear;
  -webkit-animation: jump .5s forwards linear;
}

I'm adding the class form_open with jQuery and when the class is added the animation is working properly, but when I remove the class (with jQuery), it doesn't show the animation. The element goes to the right position, but without any animation. What am I missing? My class close is empty

.close {

}

Thank you very much

UPDATE: Added fiddle Demo

Answer 1

As mentioned in comments, animations are not like transitions. Transitions automatically do the reverse effect when the class (or property) is removed whereas animations would not do that by default.

To make it happen with animations, we should create a reverse effect of the animation and add it on every alternate click.

$('#show_form').click(function() {
  $('.close').toggleClass('form_open form_close');
});

/************** KEYFRAMES ********************/

@keyframes jump {
  25% {
    transform: translate3d(0, 0px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
@-webkit-keyframes jump {
  25% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@-webkit-keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.close.form_open {
  animation: jump .5s forwards linear;
  -webkit-animation: jump .5s forwards linear;
}
.close.form_close {
  animation: jump_close .5s forwards linear;
  -webkit-animation: jump_close .5s forwards linear;
}
.form_open {
  margin-bottom: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-xs-12 espacio">
  <h4 id="show_form">
    Click here
  </h4>
  <div class="form_open">
    <div class="entrada_datos col-md-9 col-xs-7 col-lg-8">
      <form id="modifica_join" action="#" role="form">
        <div class="form-group">
          Some text
        </div>
      </form>
    </div>
  </div>
</div>
<div class="row close form_close">
  Cerrar sesión
</div>

One drawback of the above code is that it would by default make the reverse animation happen on page load but that can be overcome by adding a counter based check (refer below snippet).

var i = 0;
$('#show_form').click(function() {
  if (i == 0) $('.close').addClass('form_open');
  else $('.close').toggleClass('form_open form_close');
  i++;
});

/************** KEYFRAMES ********************/

@keyframes jump {
  25% {
    transform: translate3d(0, 0px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
@-webkit-keyframes jump {
  25% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@-webkit-keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.close.form_open {
  animation: jump .5s forwards linear;
  -webkit-animation: jump .5s forwards linear;
}
.close.form_close {
  animation: jump_close .5s forwards linear;
  -webkit-animation: jump_close .5s forwards linear;
}
.form_open {
  margin-bottom: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-xs-12 espacio">
  <h4 id="show_form">
    Click here
  </h4>
  <div class="form_open">
    <div class="entrada_datos col-md-9 col-xs-7 col-lg-8">
      <form id="modifica_join" action="#" role="form">
        <div class="form-group">
          Some text
        </div>
      </form>
    </div>
  </div>
</div>
<div class="row close">
  Cerrar sesión
</div>