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