Javascript CSS动画错误

我已经创建了一个注册/登录表单。为此，我创建了一个动画在两者之间切换。然而，我的动画中有一个bug，我找不到它的原因

代码如下：

HTML:

JS:

---

如您所见，注册表单在动画出现之前会出现一秒钟。你能找到原因吗？提前谢谢！：

好了，完成了。这是一个如何在js中调用类的问题

见下文

    let toggle_login = false;
let toggle_login_signup = function(){

  let login_form = document.querySelector(".login-form");
  let signup_form = document.querySelector(".signup-form");
  let login_msg = document.querySelector(".login-message");
  let signup_msg = document.querySelector(".signup-message");

    if (!toggle_login) {

    signup_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";

            login_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";
    login_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";



    toggle_login = true;
  }
  else {
    login_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    login_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
              signup_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both .5s";
             signup_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both .5s";   



    toggle_login = false;
  }

}

由于“动画填充模式”值为，因此错误行为为

两者都使用，这样它就可以将第一个和最后一个关键帧值应用于元素

---

现在没有这样的行为。乐意帮忙

你有什么样的bug？开始的时候，注册表格显示出来了。当我按下“已拥有帐户登录”按钮时，登录表单会随着动画从右侧滑入。但是，当我按下“无帐号”的“注册”按钮时，首先在中间出现一个“注册”表单，然后出现动画。我找不到这个原因，如果您查看CODEPTN，您将更好地理解我的意思。很难用语言来解释：你测试过它了吗？因为现在对我来说，它根本没有出现。刚刚过去。标题重叠。抱歉，问题仍然存在。让我再看看。有什么事吗/我建议将动画设置放在CSS类中，只使用JS切换两个表单元素上的类名。这样更易于维护，两种代码都更干净，并且在旧浏览器的动画语法中，跨浏览器问题的麻烦更少。@谢谢您的帮助！

@keyframes hide {
  from{
    left:50%;
    opacity: 1;
    visibility: visible;
  }

  to{
    left: 20%;
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes show {
  from{
    left:90%;
    opacity: 0;
    visibility: hidden;
  }

  to{
    left:50%;
    opacity: 1;
    visibility: visible;
  }
}

let toggle_login = false;
let toggle_login_signup = function(){

  let login_form = document.querySelector(".login-form");
  let signup_form = document.querySelector(".signup-form");
  let login_msg = document.querySelector(".login-message");
  let signup_msg = document.querySelector(".signup-message");

  if (toggle_login === false) {
    signup_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    login_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";
    login_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";

    toggle_login = true;
  }
  else {
    login_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";
    login_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";

    toggle_login = false;
  }

}

    let toggle_login = false;
let toggle_login_signup = function(){

  let login_form = document.querySelector(".login-form");
  let signup_form = document.querySelector(".signup-form");
  let login_msg = document.querySelector(".login-message");
  let signup_msg = document.querySelector(".signup-message");

    if (!toggle_login) {

    signup_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";

            login_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";
    login_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";



    toggle_login = true;
  }
  else {
    login_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    login_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
              signup_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both .5s";
             signup_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both .5s";   



    toggle_login = false;
  }

}