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?