[SOLUCIONADO] Error al generar codigo css3 desde PHP

[protoameeba]

No entiendo que pasa...

tengo una galeria con scross fade en css3, tira bien si el codigo va a pelo.

Pero cuando intento generar el codigo para "n" imagenes desde un for PHP, no funciona!!

Alguien sabe porque?

aqui va el codigo PHP:

Código PHP:

$total=7;
$animation_seconds=($total*2)-2;
$loopSize=$total-1;
$initAnimation_num=1;
$currentSecond=$animation_seconds;
for($i=0; $i<=$loopSize; $i++)
{
    echo"#mierda img:nth-of-type($initAnimation_num)
    {
    -webkit-animation-delay: $currentSecond;
    -moz-animation-delay: $currentSecond;
    -o-animation-delay: $currentSecond;
    animation-delay: $currentSecond;
    }";
    $initAnimation_num++;
    $currentSecond=$currentSecond-2;
}
 

Podeis probar, para ver que lo esta escribiendo bien, pero despues el documento no lo lee...

Alguna idea?

[pateketrueke]

Lo mejor sería que muestres el código CSS ya generado, porque todo apunta a que tu problema es de CSS pues de PHP no existe error alguno.

En dado caso lo correcto sería mostrar dichos resultados y tal vez, sólo tal vez, indagar en el foro correcto.

[protoameeba]

Hola pateketrueke gracias por responder amigo...acabo de encontrar el problema... me comi la "s" de segundos al sustituir el nuemro por la variable!!!

dia espesillo y tal...sorry!

de todas maneras efectivamente aqui dejo el codigo, resulta que he optado por hacer la galeria con cross fade de css3 por que al recargarla por ajax en un div y jquery me provocaba colision de jquery y el no conflict no funcionaba para este caso porque dentro del documento habia muchos includes...

Código HTML:

<style type="text/css" media="all">
@-webkit-keyframes FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}
 
@-moz-keyframes FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}
 
@-o-keyframes FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}
 
@keyframes FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}
 
#mierda {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#mierda img {
  position:absolute;
  left:0;
}
 
#mierda img {
  -webkit-animation-name: FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;
 
  -moz-animation-name: FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;
 
  -o-animation-name: FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;
 
  animation-name: FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
#mierda img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#mierda img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#mierda img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#mierda img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
</style>
<div id="mierda" class="shadow">
  <img src="img/main_banner_pelukas.jpg"/>
  <img src="img/main_banner_miss_van.jpg"/>
  <img src="img/main_banner_bansky.jpg"/>
  <img src="img/main_banner.jpg"/>
</div>