animation-duration calcolo della durata dell'animazione

[fmgpla45c12]

Nel mio sito ho una Slideshow il mio problema � che non ho capito come funziona il tempo dell'animazione. Malgrado cambi e metta qualsiasi tempo 60s 80s 130s non cambia niente si vede la sequenza dalla prima foto all'ultima e poi NON inizia dalla prima ma da met� della sequenza:

HTML

 <div id="slider">
      <ul>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/2.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/3.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/400.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/5.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/6.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/7.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/8.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/9.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/10.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/11.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/12.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/13.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/14.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/20.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/30.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/40.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/501.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/400.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/70.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/80.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/90.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/100.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/110.jpg"></li>
        <li><img style="width: 181px; height: 266px;"  src="images/slide/120.jpg"></li>
        <li><img style="width: 181px; height: 266px;" src="images/slide/130.jpg"></li>
        <li style="left: 0px; right: auto; width: 247px;"><img  style="width: 181px; height: 266px;" src="images/slide/400.jpg"></li>
      </ul>

CSS

/*style slider*/
#slider{margin:0 10px;padding:0;float:left;width:130px;height:1130px}
#slider ul{margin:0;padding:0;list-style:none;float:left;position:relative}
#slider ul li{margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;
-webkit-animation-name:slides_animation;
-webkit-animation-duration:130s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 130s;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name:slides_animation;
-moz-animation-duration:130s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 130s;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name:slides_animation;
animation-duration:130s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}






#slider ul li:nth-child(2){-webkit-animation-delay:5s;-moz-animation-delay:5s;animation-delay:5s}
#slider ul li:nth-child(3){-webkit-animation-delay:10s;-moz-animation-delay:10s;animation-delay:10s}
#slider ul li:nth-child(4){-webkit-animation-delay:15s;-moz-animation-delay:15s;animation-delay:15s}
#slider ul li:nth-child(5){-webkit-animation-delay:20s;-moz-animation-delay:20s;animation-delay:20s}
#slider ul li:nth-child(6){-webkit-animation-delay:25s;-moz-animation-delay:25s;animation-delay:25s}
#slider ul li:nth-child(7){-webkit-animation-delay:30s;-moz-animation-delay:30s;animation-delay:30s}
#slider ul li:nth-child(8){-webkit-animation-delay:35s;-moz-animation-delay:35s;animation-delay:35s}
#slider ul li:nth-child(9){-webkit-animation-delay:40s;-moz-animation-delay:40s;animation-delay:40s}
#slider ul li:nth-child(10){-webkit-animation-delay:45s;-moz-animation-delay:45s;animation-delay:45s}
#slider ul li:nth-child(11){-webkit-animation-delay:50s;-moz-animation-delay:50s;animation-delay:50s}
#slider ul li:nth-child(12){-webkit-animation-delay:55s;-moz-animation-delay:50s;animation-delay:55s}
#slider ul li:nth-child(13){-webkit-animation-delay:60s;-moz-animation-delay:60s;animation-delay:60s}
#slider ul li:nth-child(14){-webkit-animation-delay:65s;-moz-animation-delay:65s;animation-delay:65s}
#slider ul li:nth-child(15){-webkit-animation-delay:70s;-moz-animation-delay:70s;animation-delay:70s}
#slider ul li:nth-child(16){-webkit-animation-delay:75s;-moz-animation-delay:75s;animation-delay:75s}
#slider ul li:nth-child(17){-webkit-animation-delay:80s;-moz-animation-delay:80s;animation-delay:80s}
#slider ul li:nth-child(18){-webkit-animation-delay:85s;-moz-animation-delay:85s;animation-delay:85s}
#slider ul li:nth-child(19){-webkit-animation-delay:90s;-moz-animation-delay:90s;animation-delay:90s}
#slider ul li:nth-child(20){-webkit-animation-delay:95s;-moz-animation-delay:95s;animation-delay:95s}
#slider ul li:nth-child(21){-webkit-animation-delay:100;-moz-animation-delay:100s;animation-delay:100s}
#slider ul li:nth-child(22){-webkit-animation-delay:105s;-moz-animation-delay:105s;animation-delay:105s}
#slider ul li:nth-child(23){-webkit-animation-delay:110s;-moz-animation-delay:110s;animation-delay:110s}
#slider ul li:nth-child(24){-webkit-animation-delay:115s;-moz-animation-delay:115s;animation-delay:115s}
#slider ul li:nth-child(25){-webkit-animation-delay:120s;-moz-animation-delay:120s;animation-delay:120s}
#slider ul li:nth-child(26){-webkit-animation-delay:125s;-moz-animation-delay:125s;animation-delay:125s}
#slider ul li:nth-child(27){-webkit-animation-delay:130s;-moz-animation-delay:130s;animation-delay:130s}
#slider ul li img{display:inline-block








}




/*animation css3*/
@-webkit-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}


@-moz-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}


@keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

Grazie a chi mi risponde

[KillerWorm]

Grazie a chi mi risponde

[Mod]
Non c'è di che ma, ti prego, quando posti del codice sul forum, usa gli appositi tag di formattazione (vedi regolamento di sezione, discussione in evidenza su ogni sezione del forum).

Per ora ho aggiustato io, ma fai attenzione le prossime volte. Grazie.

Nel mio sito ho una Slideshow

Creare uno slideshow in pure-css, specialmente quando hai una valanga di immagini come nel tuo caso, diventa un procedimento macchinoso e difficile da gestire. Ti consiglierei piuttosto di impostare uno dei tanti slideshow JavaScript/jQuery con cui poter gestire la cosa in modo più pratico, dinamico e pulito. Poi vedi tu.

Malgrado cambi e metta qualsiasi tempo 60s 80s 130s non cambia niente si vede la sequenza dalla prima foto all'ultima e poi NON inizia dalla prima ma da met� della sequenza:

La proprietà animation-duration stabilisce la durata dell'animazione relativamente alle singole slide (cioè relativamente ai singoli elementi li, non all'intera animazione dello slideshow). Nel tuo sistema l'animazione è definita con questi step:

   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}

Questo significa che ogni elemento viene mostrato inizialmente con opacity:0 (completamente trasparente), per passare ad opacity:1 (completamente opaco) quando si arriva al 4% dell'animazione (cioè il 4% di quei 130s, circa 5s, che hai definito nel tuo caso), quindi resta ad opacity:1 fino al 16% e poi torna a 0 fino a finire l'animazione.

La proprietà animation-delay (pausa iniziale), così come è applicata per i singoli li, fa in modo di far partire l'animazione di ogni singolo elemento in modo sequenziale (ogni 5s, che più o meno è il tempo di comparsa di ogni slide). E' chiaro che questo valore va calcolato, per ogni elemento, in modo che la transizione tra una slide e l'altra sia contigua. In sostanza questi valori creano la durata dell'intera animazione.

Le tue definizioni iniziali per il dalay, che tra l'altro non hanno motivo di essere differenti tra i vari vendor, sono ovviamente sbagliate:

-webkit-animation-delay: 130s;

-moz-animation-delay: 130s;

animation-delay: 0;

Queste le puoi lasciare tutte a 0. Dovrai invece ricalcolare opportunamente ciascun valore per i singoli elementi, in modo da dividere queste pause secondo l'effettivo tempo che ti serve.

[fmgpla45c12]

Tante scuse per la mia poca conoscenza di come funziona un forum, li uso pochissimo. Ringrazio per la risposta che ho letto, per il momento, superficialmente causa il tempo a disposizione, ma sono sicuro che approfondendo risolverò. Se c'è qualcosa che non capirò mi rifarò vivo. Grazie ancora.

[fmgpla45c12]

Grazie, molto chiaro, avevo le idee un po' confuse. Grazie anche per il consiglio di cambiar metodo (specialmente adesso che ho capito come funziona questo).