Estou com um problema em utilizar animação no css
quando eu clico nos botões login e sing Up pela primeira vez funciona normalmente, porém quando volto a clicar em qualquer um desse botões a animação não funciona, já tentei usar ClassList.remove("classe") porém não consegui resolver.
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.add("animationToRight");
console.log("clicado");
});
changeToSingUp.addEventListener('click', function() {
animation.classList.add("animationToLeft");
animation.classList.remove("animationToRight");
console.log("clicado");
});
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;}
}
<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">
</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>
</body>
</html>