Tengo el siguiente problema y la siguiente duda. Tengo dos condicionales, en donde se agregan animaciones, "fadeOutRigth", "fadeInRight", "ninguna", "fadeInLeft". **Lo que quiero realizar es que imag, salga con un fadeOutRight, luego entre imag2 con un fadeInRight, próximamente salga imag2 con un fadeOutLeft y por ultimo entre imag con un fadeInLeft.** Digamos que lo único que no pude lograr es que imag2 salga con un fadeOutLeft, de todas formas no logro comprender por que cuando le agrego la clase "animacionDos" a img2, se termina realizando la animación en img, eso me desorienta bastante. Bueno en conclusión me gustaría que sean 4 animaciones como expliqué anteriormente(lo dejo en negrita). Se ve raro al ejecutar porque no está preparado el codigo para tan poca pantalla pero se puede clickear igual en la imagen.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var imagen = document.getElementById("imag");
    var imagDos = document.getElementById("imag2");
    let contadorClick = 0;

    function cambioId() {
      imag.id = "imag2";   
      document.getElementById("uno").id = "unoDespues";
      document.getElementById("padreOculto").id = "padreVisible";
    };
    function cambioIdDos() {
      imag2.id = "imag";  

    };

    const getDatos = () => {
      return new Promise((resolve) => {
      setTimeout(() => {
        resolve(cambioId());
      }, 2000);
    });
    }
    const getDatosDos = () => {
      return new Promise((resolve) => {
      setTimeout(() => {
        resolve(cambioIdDos());
      }, 2000);
    });
    }

    imagen.addEventListener("click", function cambiarImag() {
        contadorClick++;
        console.log(contadorClick);
        if(contadorClick>=4){
            contadorClick = 0;
        }
        if(contadorClick%2 != 0) {
            document.getElementById("imag").classList.add("animacion"); /* fadeOutRight */
            document.getElementById("imag").classList.remove("animacionDos"); /* fadeInLeft */
            getDatos();
        }

        else {
            document.getElementById("imag2").classList.add("animacionDos"); /* fadeInLeft */
            document.getElementById("imag2").classList.remove("animacion"); /* fadeOutRight */
            document.getElementById("unoDespues").id = "uno";
            document.getElementById("padreVisible").id = "padreOculto";
            getDatosDos();
        }
      })

<!-- language: lang-css -->

        .contenedorsec {
        box-sizing: border-box;
        width: 100%;
        height: 100vh;
      }
      #uno {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-areas: 
        "contit imag imag"
        "contit imag imag";
        background-color:rgb(255, 255, 93);
    }
    #unoDespues {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 0.5fr 2.5fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-areas: 
        "contit imag imag"
        "contit padreVisible padreVisible";
        background-color:rgb(255, 255, 93);
    }

    .contit { grid-area:contit; }
    #padreVisible { grid-area:padreVisible; }
    #imag { grid-area:imag; }
    .contit {
        width: 3em;
        height: 100vh;
        margin-left: 30%;
        background-color: rgb(0, 0, 0);
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid gray;
    }
    .contit h1 {
        color: whitesmoke;
    }
    #padreOculto {
        position: absolute;
        opacity: 0;
        height: 0;
        width: 0;
        padding: 0;
        margin: 0;
    }
    #padreVisible {
        opacity: 1;
        margin-left: 1.5em;
        width: 13em;
        height: 50vh;
        background-color: wheat;
        animation:fadeIn;
        animation-duration: 2s;
    }
    #imag {
        width: 12em;
        height: 50vh;
        margin-top: 10em;
        border-radius: 60%;
        border: 2px solid rgb(255, 255, 255);
     }
     #imag2 {
        width: 5em;
        margin-left: 50%;
        border: 1px solid rgb(255, 255, 255);
        height: 5em;
        margin-top: 10em;
        border-radius: 0;
        animation:fadeInRight;
        animation-duration: 4s;
     }
     #texto {
        border-right: 2px solid black;
        margin: 0;
        display: inline;
    }
     /* ************************* */
     .animacion {
        animation:fadeOutRight;
        animation-duration: 2s;
     }
     .animacionDos {
        animation:fadeInLeft;
        animation-duration: 2s;
     }
     .animacionSalir {
        animation:fadeOutLeft;
        animation-duration: 2s;
     }

<!-- language: lang-html -->

    <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                <title>Document</title>
                <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" 
                rel="stylesheet">
                <link rel="preconnect" href="https://fonts.googleapis.com">
                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                <link rel="preconnect" href="https://fonts.googleapis.com">
                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                <link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" 
                rel="stylesheet">
                <link rel="stylesheet" 
                href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"                         
                rel="stylesheet"
                   integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"             
                crossorigin="anonymous">
                   <link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" 
                rel="stylesheet">
               <link rel="stylesheet" 
               href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
            </head>
    <body>   
                   <div class="contenedorsec" id="uno">
                    <!-- SUBTITULO -->
                    <div class="contit">
                       <h1 id="tituloUno"><br>¿<br>Q<br>U<br>&nbspI<br>E<br>N<br><br> S<br>O<br>Y<br>?</h1>
                    </div>
                    <div id="padreOculto">
                       <p id="texto"></p>
                     </div>
                    <img src="https://i0.wp.com/imagenesparapeques.com/wp-content/uploads/2021/05/Mario-Bros-png-transparente.png?ssl=1" alt="" id="imag">
                   </div>
    </body>
    </html>

<!-- end snippet -->