CSS Animation Bug

Question

i have created a signup / login form. To this I have created an animation to switch between the two. However there is a bug in my animation, and I cannot find the cause for it.

Here is the code:

HTML:

<main>
  <div class="wrapper">
    <div class="message signup-message">
      <h1>Welcome to website!</h1>
      <h4>Get started immediately by creating an account below!</h4>
    </div>
    <div class="message login-message">
      <h1>Welcome back!</h1>
      <h4>Log in below!</h4>
    </div>
    <form class="form signup-form" action="includes/signup.inc.php" method="post">
      <div class="form-group">
        <input type="text" name="first-signup" required autocomplete="off">
        <label>
          First name<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="last-signup" required autocomplete="off">
        <label>
          Last name<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="uid-signup" required autocomplete="off">
        <label>
          Username<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="email-signup" required autocomplete="off">
        <label>
          E-mail<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="password" name="pwd-signup" required autocomplete="off">
        <label>
          Password<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="password" name="pwd-repeat-signup" required autocomplete="off">
        <label>
          Repeat password<span class="req">*</span>
        </label>
      </div>
      <div class="spec form-group">
        <span>Already have an account? </span><a href="#" onclick="toggle_login_signup()">Login</a>
      </div>
      <div class="form-group">
        <button type="submit" name="submit-signup">sign up <i class="fas fa-caret-right"></i></button>
      </div>
    </form>
    <form class="form login-form" action="includes/login.inc.php" method="post">
      <div class="form-group">
        <input type="text" name="uid-login" required autocomplete="off">
        <label>
          Username/E-mail<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="pwd-login" required autocomplete="off">
        <label>
          Password<span class="req">*</span>
        </label>
      </div>
      <div class="spec form-group">
        <input type="checkbox" name="remember-me"> Remember me<br>
        <a href="#">Forgot your password?</a><br>
        <span>No account? </span><a href="#" onclick="toggle_login_signup()">Sign up</a>
      </div>
      <div class="form-group">
        <button type="submit" name="submit-signup">Login <i class="fas fa-caret-right"></i></button>
      </div>
    </form>
  </div>
</main>

CSS:

@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;
  }
}

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 === 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;
  }

}

https://codepen.io/becckman/pen/XorEdJ

as you can see, the signup form appears for a second before the animation occurs. Can you find the cause for this? Thanks in advance! :)

Answer 1

All right it's done. It was a matter of how do you call the classes in js.

See below.

    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;
  }

}

The buggy behaviour was, because the animation-fill-mode value.

Use both, so it can apply the first & last keyframe value to the element.

Now there is no such buggy behavior. Glad to help ;)