Animation not working on component in ReactJS. - css

Question

Good day. I have been attempting to create the animation demonstrated here in ReactJS. I have using that codepen as a loose reference, yet the animation doesn't work when I press the login button on my own project implementing this effect on the login page.
What have I done wrong?
Thanks in advance,
Duke J. Morgan.
The specific aspects of my project that, as far am I aware, are primary components in the login page that, in this problem, might be the cause of the problem I mentioned above:
import React, { Component } from 'react';
class LoginComponent extends Component {
constructor(props) {
super(props)
this.state = {
incorrect: false
}
}
onLoginButtonClick() {
let passwordInput = document.getElementById("passwordInput");
if (passwordInput.innerHTML !== "test") {
// passwordInput.classList.add("incorrect-login");
let copy = this.state;
copy.incorrect = true;
console.log(`Incorrect boolean: ${copy.incorrect}`);
this.setState(copy);
return;
}
this.props.setPage();
}
render() {
return (<div className="box" id="loginBox">
<h2 className="title">Username</h2>
<input type="text" placeholder="Username" className="input"/>
<h2 className="title">Password</h2>
<input id="passwordInput" placeholder="Password" className={`input ${this.state.incorrect ? 'incorrect-login' : ''}`} type="password"/>
{/* Forgot Password? */}
<button className="button" id="login" onClick={() => {this.onLoginButtonClick()}}>Login</button>
</div>);
}
}
export default LoginComponent;
//The CSS of the login box. incorrect-login is the class added to the password input element when the login button is clicked but the incorrect password, or no password, has been entered.
#loginBox {
.title:nth-child(1) {
margin-bottom: 10px;
}
.title:nth-child(3) {
margin-bottom: 10px;
margin-top: 10px;
}
.incorrect-login {
margin: 4px auto;
width: 70%;
height: 15%;
display: block;
padding: 5px;
padding-left: 10px;
border: 2px solid red;
animation: move 10s;
}
}
#keyframes move {
0%, 100% { left: 0px;}
20% , 60%{left: 15px;}
40% , 80%{left: -15px;}
}

Answer 1

The problem is in the css. I think you should make separated classes for the login and incorrect-login.
.login {
margin: 4px auto;
width: 70%;
height: 15%;
display: block;
padding: 5px;
padding-left: 10px;
position: absolute;
}
.incorrect-login {
border: 2px solid red;
animation: move 10s;
}
If you want to use property "left" in animation you have also add property position: absolute; to the component's class.
And code for the password input class name should be:
className={`input ${this.state.incorrect ? 'login incorrect-login' : 'login'}`}
Also you should not use document.getElementById in React applications directly. If you really need to get reference of the dom element created by React, you should use ref prop instead.