Skip to main content
cuerpo editado
Origen Enlace

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último 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.

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.

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 último 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.

se eliminaron 22 caracteres en el cuerpo
Origen Enlace
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();
    }
  })
    .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;
 }
<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>
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();
    }
  })
    .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;
 }
<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>
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();
    }
  })
    .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;
 }
<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>
Origen Enlace

¿Como agregar dos animaciones a una misma etiqueta?

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.

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();
    }
  })
    .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;
 }
<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>