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

Can you put the scenario on jsfiddle? jsfiddle.net It will be easier to see the issue — NickOS
– NickOS, Commented May 26, 2015 at 6:07
@Bernardao: Animations are not like transitions. They don't automatically have the reverse effect when the class is removed. — Harry
– Harry, Commented May 26, 2015 at 6:27
@Bernardao: You would have to create a reverse animation effect and add it to the element on the second click like here. I have changed some translate values but the approach would be same. — Harry
– Harry, Commented May 26, 2015 at 6:49

Harry · Accepted Answer · 2015-05-26 07:17:34Z

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>

I don't see the snippet working properly, better add the fiddle jsfiddle.net/Bernardao/f2gwozgk/18
@Bernardao: Yea, sorry I had missed a class in the HTML. Fixed now :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related