javascript - 触发后如何反转css动画？

Question

晚上好，我是一名初级前端开发人员，正在尝试实现 Pinterest 草图以进行培训。
我为注册/登录页面找到了这个 gif，但我在实现动画方面遇到了一个主要问题，我不知道当用户单击注册按钮时反转动画有没有人能告诉我如何反转动画动画片？

function animation() {
    var element = document.getElementById("containerForm")
    element.classList.add("slide")
}

.containerForm {
  width:50px;height:50px;background-color:red;
}
.slide {
    animation: slide 2s ease-in-out;
    position: relative;
    animation-fill-mode: forwards;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
        overflow: hidden;
        visibility: visible;
    }
}

<div class="containerForm" id="containerForm">
      <form></form>
</div>
<button onclick="animation()">click</button>

但正如我所说的，我对第二步没有想法
Link of gif

Answer 1

您可以添加另一个 css 类并使用 animation-direction 属性。
IE

.slide-back{
  animation: slide 2s ease-in-out;
  position: relative;
  animation-direction: reverse;
}