Hola amigos intento hacer que una sere de mensajes se muestre uno detras de otro en el footer de una web, como esas cintas de mensajes que salen en los noticiarios, ya se como animar con css3, y lo que tengo es un div con una serie de parrafos <p> que contienen los mensajes, algo como esto:
luego en el css pongo lo siguiente
Código CSS:
Ver original#avisos p:nth-child(n+1){
position:absolute;
font-size:20px;
color:rgba(255,255,255,0);
text-shadow:3px 3px 5px rgba(0,0,0,0);
-webkit-transform:translate(150px,0px);
-webkit-animation:muevetexto 5s;
-webkit-animation-delay: 0s;
}
#avisos p:nth-child(n+2) {
position:absolute;
font-size:20px;
color:rgba(255,255,255,0);
text-shadow:3px 3px 5px rgba(0,0,0,0);
-webkit-transform:translate(150px,0px);
-webkit-animation:muevetexto 5s;
-webkit-animation-delay: 5s;
@-webkit-keyframes muevetexto{
0%{color:rgba(255,255,255,0); -webkit-transform:translate(-150px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0);}
25%{color:rgba(255,255,255,1); -webkit-transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
50%{color:rgba(255,255,255,1); -webkit-transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
75%{color:rgba(255,255,255,1); -webkit-transform:translate(0px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0.3);}
100%{color:rgba(255,255,255,0); -webkit-transform:translate(150px,0px);text-shadow:3px 3px 5px rgba(0,0,0,0);}
}
}
con esto intento que el primer parrafo se anime de inmediato por 5 segundos y el parrafo que sigue tenga un retraso de 5s, hasta aqui todo bien, la animacion desplaza el texto, haciendo aparecer jugando con la opacidad, luego se queda fijo unos segundos para desaparecer, luego aparece el segundo mensaje y hace lo mismo
Pero ahora no se como hacer que la animacion se repita sin fin, es decir que se muestren ambos textos de forma alternada sin solaparse, tambien quisiera agregar mas textos despues, y que sean puestos dinamicamente mediante php por ejemplo, alguien me ayuda?