Background slide animation during onMouseMove not working as expected - css

Question

I have a React Login screen with black background set using CSS Styling. The login screen is quite elementary at this point which comprises of 3 input tag username, password and submit respectively.
All i am trying to do right now is change the background of the login screen with slide down effect (height 0 to height $loginScreenHeight) whenever the mouse moves.
I got it working as expected but with a slight side-effect. The side-effect is whenever the mouse moves the initial background goes away momentarily and the new background starts sliding down.
I want the new background to start sliding on top of the old background and cover it up. Can some Css expert please throw a light on what i am missing here?
Following is my code.
import React from "react";
import axios from "axios";
import { connect } from "react-redux";
import { userlogin } from "./../action/userLogin";
class Login extends React.Component {
state = {
email: "",
passwd: "",
loginStatus: "",
mouseOverLogin: false
};
enteruname = e => this.setState({ email: e.target.value });
enterpasswd = e => this.setState({ passwd: e.target.value });
submitCredentials = e => e.preventDefault();
render() {
return (
<div
className="login"
onMouseMove={() => this.setState({ mouseOverLogin: true })}
>
<form
onSubmit={this.submitCredentials}
className={
this.state.mouseOverLogin ? "loginForm animateLogin" : "loginForm"
}
>
<p>Login</p>
<hr />
<input
className="uname"
placeholder="Enter Username"
type="email"
name="email"
value={this.state.email}
onChange={this.enteruname}
/>
<input
className="passwd"
placeholder="Enter Password"
type="password"
name="passwd"
value={this.state.passwd}
onChange={this.enterpasswd}
/>
<button className="loginBtn">Login</button>
</form>
</div>
);
}
}
export default connect()(Login);
CSS File:-
.login {
width: 100vw;
height: 100vh;
overflow: hidden;
position: absolute;
top: 0vh;
left: 0vw;
}
.loginForm {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
top: 25vh;
left: 38vw;
width: 27vw;
height: 54vh;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 1000;
border-radius: 20px;
}
.login form input {
margin: 0 auto;
width: 24vw;
height: 6vh;
border-radius: 20px;
outline: none;
background: rgba(42, 27, 61, 0.6);
color: white;
text-align: center;
font-size: 1.2rem;
}
.uname {
position: absolute;
top: 18vh;
}
.uname:focus,
.passwd:focus {
background: rgba(42, 27, 61, 0.6);
}
.passwd {
position: absolute;
top: 28vh;
}
.loginBtn {
position: absolute;
width: 50%;
height: 5vh;
left: 25%;
text-decoration: none;
outline: none;
top: 38vh;
border-radius: 20px;
background: rgba(42, 27, 61, 0.6);
color: white;
}
.login form input::placeholder {
color: white;
text-align: center;
font-size: 1.2rem;
}
.login form p {
color: white;
font-size: 25px;
width: 24vw;
position: absolute;
top: 5vh;
left: 2vw;
}
.animateLogin {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 25vh;
left: 38vw;
width: 27vw;
animation: slideDown 2s 1 forwards ease-in-out;
z-index: 0;
// transition: all 280ms ease-in-out;
}
#keyframes slideDown {
from {
height: 0;
background: rgba(0, 0, 0, 0.7);
}
to {
background: $navlink;
height: 54vh;
}
}
hr {
position: absolute;
top: 12vh;
width: 24vw;
height: 1px;
background: white;
}

Answer 1

the height change to 0 is a problem because the "old background" is set on the element with 0 height.
I wrote 2 POC that can help you:
.a,
.b {
margin: 10px;
padding: 10px;
height: 30px;
text-align: center;
border: solid 1px blue;
background: green;
position: relative;
}
.a:hover {
animation: slidebg 2s;
box-shadow: inset 0 50px 0 0 blue;
}
#keyframes slidebg {
0% {
box-shadow: inset 0 0 0 0 blue;
}
100% {
box-shadow: inset 0 50px 0 0 blue;
}
}
.b-bg {
position: absolute;
height: 0;
top: 0;
left: 0;
background: blue;
width: 100%;
}
.b span {
position: relative;
z-index: 10;
}
.b:hover .b-bg {
animation: slidebg2 2s;
height: 100%;
}
#keyframes slidebg2 {
0% {
height: 0;
}
100% {
height: 100%;
}
}
<div class="a">link</div>
<div class="b">
<div class="b-bg"></div>
<span>link</span>
</div>