cinta de mensajes infinita

[templario29]

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:

Código HTML:

<div id="avisos">
 
    <p>mensaje 1<p>
    <p>segundo mensaje<p>
   
 
</div>
 

luego en el css pongo lo siguiente

Código CSS:

#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?

[kseso?]

animation-iteration-count: infinite;

[templario29]

Si, pero como uso esa propiedad para sincronizar la animacion? porque lo intento y se solapan, es decir aparecen las dos juntas, ayuda plis, habia pensando en hacer una animacion "global" que controle la ejecucion de las demas es eso posible?

[Yacobh]

Hola probé el código que publicaste y solo me salieron los parrafos y mas nada sin animación... asi


mensaje 1



segundo mensaje


me imagino que tiene que ver con la animación en css3.. si pudieras colocar ese código quizá podría ayudar

[templario29]

si te fijas solo funciona en chrome ya que todo lleva el prefijo -webkit-, ahora quizas tampoco funcione porque coloque el codigo solo de ejemplo, alguna idea de como hacerlo? es similar a los carousel que se hacen con jquery pero quiero lograrlo solo con css3 y html5

[kseso?]

No seré yo quien le recomiende que lo realice con puro css3.
Veamos:
En su caso va a tener que modificar la posición (desplazamiento horizontal), la visibilidad y el tiempo que cada frase invertirá en el proceso.
En su caso, desconoce a priori el tamaño de cada párrafo (longitud de la cadena de texto), así que el control de todas las variables para una visualización agradable, sin brusquedades, va a ser problemático, o cuando menos, un tanto laborioso, si además de la visibilidad quiere lograr también ese movimiento horizontal y fluido.

[templario29]

Pues si ha sido demasiado laborioso, pense que algo que parecia sencillo seria mas conveniente hacerlo con css3, pero al final he decidido ocupar Jquery un plugin para hacer carousel y me funciona mucho mejor, tengo otras secciones de la web donde quiero ocupar lo mismo pero para mostrar imagenes y texto a la vez, creo que tendre que ocupar jquery tambien para eso