I’m trying to use keyframe animations to move a block up and down based on adding or removing a class using jquery click. However, this seems to “jiggle” the orange div on load, and then does absolutely nothing after that.

What am I doing wrong? I feel like I’ve followed tutorials on this type of thing very closely. I do want to use css animation for this (not jquery animation), and I would like to use the css “reverse” animation feature.

CSS:

.swipeable {
  background: orange;
  position: absolute;
  bottom: 0;
  width: 100%;
}

@keyframes updown {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(40px);
  }
}

.swipeable-open {
  animation: updown;
  animation-direction: normal;
  animation-duration: 0.5s;
  background: red;
}

.swipeable-close {
  animation: updown;
  animation-direction: reverse;
  animation-duration: 0.5s;
  background: yellow;
}

jQuery:

$(document).on('click', '.swipeable', function() {
    const swipeable = $(this);
  
  if (swipeable.hasClass('swipeable-open')) {
    swipeable.removeClass('swipeable-open');
    swipeable.addClass('swipeable-close');
  } else {
    swipeable.addClass('swipeable-open');
    swipeable.removeClass('swipeable-close');
  }
})

HTML:

<div class="swipeable swipeable-close">
<h1>
  This is a header
</h1>
<p>
  Clicking on this orange area should move the orange area up. Clicking on it again should move the orange area down.
</p>
</div>

Fiddle:

https://jsfiddle.net/darrengates/67e3L948/