Fácil, pense comigo apertei no botão `Login` a animação tem que ir para a direita então. animation.classList.add("animationToRight"); Ok, a animação foi para a direita, mas agora vamos apertar no botão `Sing Up` a animação tem que volta para a esquerda então. animation.classList.add("animationToLeft"); Só que neste caso as animações só serão executadas apenas uma unica vez. Para isso não acontecer quando você clica em um botão você tem que adicionar e remover a outra animação. Para isso, só fazer isso, para o botão `Login`. animation.classList.add("animationToRight"); animation.classList.remove("animationToLeft"); E para o botão `Sing Up`. animation.classList.add("animationToLeft"); animation.classList.remove("animationToRight"); Quando você apertar no botão `Login` a animação vai ir para a direita e vai remover a animação da esquerda caso se tiver. Quando apertar no botão `Sign Up` a animação da esquerda vai ser adicionada e a animação da direita sera removida. Só isso, e vai ficar neste loop segue o código. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>particles.js</title> <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles."> <meta name="author" content="Vincent Garreau" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" media="screen" href="css/style.css"> <link rel="stylesheet" media="screen" href="css/login.css"> <style> h2 { font-size: 28px; color: #C1C4D6; } p{ font-size: 14px; color: #C1C4D6; padding: 15px 0px 20px; display: block; } .retangle { padding-top: 50px; padding-left: 100px; padding-right: 100px; height: 300px; width: 600px; line-height: 50px; text-align: center; position: relative; top: 50%; left: 50%; margin-top: -150px; margin-left: -400px; background-color: rgb(0, 0, 0, 0.55); border-radius: 3px; opacity: 0.90; } .questionSingUp { position: absolute; border:solid 1px; border-color: red; width: 270px; height: 200px; } .questionLogin { position: relative; border:solid 1px; border-color: pink; width: 270px; height: 200px; float: right; } .actionSingUp { position: absolute; border:solid 1px purple; width: 270px; height: 100px; background-color: rgb(58,58,58); } .actionSingIn { position: relative; margin-left: 329px; border:solid 1px green; width: 270px; height: 100px; background-color: rgb(58,58,58); } .loginActionWrap { height: 450px; width: 370px; line-height: 50px; text-align: center; position: relative; top: 50%; left: 50%; margin-top: -400px; margin-left: -365px; background-color: rgb(255,255,255); border-radius: 3px; box-shadow: 0 0 10px 3px rgba(39, 37, 37, 0.45); } #singUpBtn{ display: inline-block; border: solid 1px #C3C3C3; color: #C3C3C3; min-width: 140px; border-radius: 5px; line-height: 31px; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 14px; } #loginBtn { display: inline-block; border: solid 1px #C3C3C3; color: #C3C3C3; min-width: 140px; border-radius: 5px; line-height: 31px; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 14px; } .animationToRight { -webkit-animation: mymoveRight 5s ; /* Safari 4.0 - 8.0 */ animation: mymoveRight 1.3s ; -webkit-animation-fill-mode: forwards; } .animationToLeft { -webkit-animation: mymoveLeft 5s ; /* Safari 4.0 - 8.0 */ animation: mymoveLeft 1.3s ; -webkit-animation-fill-mode: forwards; } /* Safari 4.0 - 8.0 */ @keyframes mymoveRight { from {left: 635px;} to {left: 990px;} } @keyframes mymoveLeft { from {left: 990px;} to {left: 635px;} } </style> </head> <body> <!-- particles.js container --> <div id="particles-js"> <!--Login--> <div class="retangle"> <div class="questionSingUp"> <h2><span>Have an accont</span> ?</h2> <p><span>Lorem ipsum dolor sit ames lorem ipsum dolor sit ames lorem ipsum dolor sit ames lorem ipsum dolor sit ames</span></p> <a href="#" id="singUpBtn"> <span>Sing up</span> </a> </div> <div class="questionLogin"> <h2><span>Have an accont</span> ?</h2> <p><span>Lorem ipsum dolor sit ames lorem ipsum dolor sit ames lorem ipsum dolor sit ames lorem ipsum dolor sit ames</span></p> <a href="#" id="loginBtn"><span>Log in</span></a> </div> <div class="actionSingUp"> <!--<form action="#"> <fieldset> <legend class="title">Sing Up</legend> <div class="inputBlock"> <div class="inputWrap"> <input type="text" id="singName" class="input" placeholder="Full Name"> <label for="singName" class="labelEmail"></label> </div> <div class="inputWrap"> <input type="text" id="singEmail" class="input" placeholder="Email"> <label for="singEmail" class="labelEmail"></label> </div> <div class="inputWrap"> <input type="password" id="singPass" class="input" placeholder="Passeord"> <label for="singPass" class="labelEmail"></label> </div> </div> <input type="submit" value="Sing Up" class="BtnSingUp"> </fieldset> </form>--> </div> <div class="actionSingIn"> <!--<form action="#"> <fieldset> <legend class="title">Sing Up</legend> <div class="inputBlock"> <div class="inputWrap"> <input type="text" id="singName" class="input" placeholder="Full Name"> <label for="singName" class="labelEmail"></label> </div> <div class="inputWrap"> <input type="text" id="singEmail" class="input" placeholder="Email"> <label for="singEmail" class="labelEmail"></label> </div> <div class="inputWrap"> <input type="password" id="singPass" class="input" placeholder="Passeord"> <label for="singPass" class="labelEmail"></label> </div> </div> <a href="#" class="forgotPass"><span>Forgot password</span> ?</a> <input type="submit" value="Sing Up" class="BtnSingUp"> </fieldset> </form>--> </div> </div> <div id="divAnimation" class="loginActionWrap"></div> </div> <!--End Login--> <!-- scripts --> <script src="../particles.js"></script> <script src="js/app.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <!-- stats.js --> <script src="js/lib/stats.js"></script> <script src="js/funcionalidade.js"></script> <script> var changeToLogin = document.getElementById("loginBtn"); var animation = document.getElementById("divAnimation"); var changeToSingUp = document.getElementById("singUpBtn"); changeToLogin.addEventListener('click', function() { animation.classList.add("animationToRight"); animation.classList.remove("animationToLeft"); console.log("clicado"); }); changeToSingUp.addEventListener('click', function() { animation.classList.add("animationToLeft"); animation.classList.remove("animationToRight"); console.log("clicado"); }); </script> </body> </html> <!-- end snippet -->