0

Estoy tratando de hacer una animación de texto. Cuando carga la página, el texto debe aparecer por el lado izquierdo de la pantalla hasta que se coloca en su lugar. El problema es que la transición no está quedando bien porque al cargar la página, se ve el texto colocado, y entonces empieza la animación, es decir: aparece, desaparece y por último hace la animación. Esto es lo que tengo:

.texto {
      animation-name: moveToRight;
      animation-duration: 3s;
    }

    @keyframes moveToRight {
    0% {
        opacity: 0;
        left: -10000px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

Se me ha ocurrido darle un opacity 0 al .texto, sin embargo si hago esto, el texto desaparece después de la animación. ¿Alguien puede ayudarme?

2
  • El texto deberia estar fuera de pantalla desde el inicio y hacer el movimiento hasta donde sea su pos final, estimo Commented el 23 abr. 2021 a las 9:44
  • ¿pero cómo lo hago? En el inicio de la animación ya lo pongo a -10000px y si pongo eso en la clase del texto, entonces después de hacer la animación, el texto volvería a salir de la pantalla. Commented el 23 abr. 2021 a las 10:08

1 respuesta 1

1

Para que funcione el elemento (.texto) en este caso debe tener una posicion que no sea static. Dependiendo de tu necesidad puedes poner absolute o relative, funcionara con cualquiera de las dos, lo que logras con esto es que el elemento pueda reacomodarse en cualquier posicion. prueba a poner esto:

.texto {
      position: relative;
      animation-name: moveToRight;
      animation-duration: 3s;
    }

    @keyframes moveToRight {
    0% {
        opacity: 0;
        left: -10000px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.