Animation "fade1" works but not "fade0"

Question

Trying to add animation to "Forgot Password?" element in JS.

document.querySelectorAll(`button`).forEach(btn =>
  btn.addEventListener(`click`, () => {
    if (btn.id === 'login-btn') {
      forgotPassword.classList.add("fade1");
      forgotPassword.classList.remove("fade0");
      submitLoginInfo.textContent = "Log In";
    } else {
      forgotPassword.classList.add("fade0");
      forgotPassword.classList.remove("fade1");
      submitLoginInfo.textContent = "Sign Up";
    }
  })
);

.fade0 {
    animation: 1s fadeAway ease-out forwards;
}
.fade1 {
    animation: 1s fadeIn ease-in-out forwards;
}
@keyframes fadeAway {
    from {opacity: 1};
    to {opacity: 0};
}
@keyframes fadeIn {
    from {opacity: 0};
    to {opacity: 1};
}

<h1 id="submitLoginInfo">-</h1>
<div id="forgotPassword">thing</div>
<button id="login-btn">fadein</button>
<button id="not-login-button">fadeout</button>

Adding fade1 class works as expected, the animations plays every time the login button is activated. But the fading out animation of the message doesn't work. Any clue? (full code: https://justpaste.it/g5k2a)

Answer 1

You didn't give your items any target opacity. Add the target opacity to the class definition otherwise opacity is already 1, and your telling it to animate from 1 to 1

document.querySelectorAll(`button`).forEach(btn =>
  btn.addEventListener(`click`, () => {
    if (btn.id === 'login-btn') {
      forgotPassword.classList.add("fade1");
      forgotPassword.classList.remove("fade0");
      submitLoginInfo.textContent = "Log In";
    } else {
      forgotPassword.classList.add("fade0");
      forgotPassword.classList.remove("fade1");
      submitLoginInfo.textContent = "Sign Up";
    }
  })
);

.fade0 {
    animation: 1s fadeAway ease-out forwards;
    opacity: 0;
}
.fade1 {
    animation: 1s fadeIn ease-in-out forwards;
    opacity: 1;
}
@keyframes fadeAway {
    from {opacity: 1};
    to {opacity: 0};
}
@keyframes fadeIn {
    from {opacity: 0};
    to {opacity: 1};
}

<h1 id="submitLoginInfo">-</h1>
<div id="forgotPassword">thing</div>
<button id="login-btn">fadein</button>
<button id="not-login-button">fadeout</button>