animation with CSS

Asked

Viewed 60 times

0

I have a problem using animation in css

when I click the login and Sing Up buttons for the first time works normally, but when I click on any of these buttons the animation does not work, I tried using Classlist.remove("class") but I could not solve.

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>

javascript html css animation

1 answer

4


Easy, think with me I hit the button Login the animation has to go right so.

animation.classList.add("animationToRight");

Okay, the animation went to the right, but now let’s push the button Sing Up animation has to go back to the left so.

animation.classList.add("animationToLeft");

Only in this case the animations will only be performed once. For this not to happen when you click a button you have to add and remove the other animation. To do this, just do this, to the button Login.

animation.classList.add("animationToRight");
animation.classList.remove("animationToLeft");

And to the button Sing Up.

animation.classList.add("animationToLeft");
animation.classList.remove("animationToRight");

When you push the button Login the animation will go to the right and will remove the animation from the left if you have it. When press the button Sign Up the animation on the left will be added and the animation on the right will be removed. Just this, and will stay in this loop follows the code.

<!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>

  • Yes, that’s correct, just now I came to see that I was putting 2 clasList.add on kkkkkk login

  • anyway thank you very much

Browser other questions tagged javascript html css animation

You are not signed in. Login or sign up in order to post.