Активация анимации ключевого кадра на основе события щелчка, которое добавляет и удаляет класс CSS ⇐ CSS

[Anonymous]

Я пытаюсь использовать анимацию по ключевым кадрам для перемещения блока вверх и вниз в зависимости от добавления или удаления класса с помощью щелчка jquery. Однако это, похоже, "трясет" оранжевый элемент div при загрузке, а затем ничего не делает.
Что я делаю не так? У меня такое ощущение, что я очень внимательно следил за уроками по такого рода вещам. Я хочу использовать для этого анимацию CSS (а не анимацию jquery), и я хотел бы использовать функцию «обратной» анимации CSS.
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:

Код: Выделить всё

This is a header


Clicking on this orange area should move the orange area up. Clicking on it again should move the orange area down.

Скрипка:
https://jsfiddle.net/darrengates/67e3L948/

Подробнее здесь: https://stackoverflow.com/questions/786 ... oves-a-css