ReactJSのコンポーネントでアニメーションが機能していません。

良い一日。私はここReactJSでデモンストレーションされたアニメーションを作成しようとしています。そのコーデックを大まかな参照として使用していますが、ログインページにこの効果を実装している自分のプロジェクトでログインボタンを押すと、アニメーションが機能しません。

私は何を間違えましたか？

よろしくお願いします、デュークJ.モーガン。

私の知る限り、ログインページの主要なコンポーネントである私のプロジェクトの特定の側面は、この問題では、上記の問題の原因である可能性があります。

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"/>
        {/* <a href="#">Forgot Password?</a> */}
        <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;}
}