Visualizzazione dei risultati da 1 a 4 su 4

Visualizzazione discussione

  1. #1

    animation-duration calcolo della durata dell'animazione

    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
    codice 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
    codice:
    /*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
    Ultima modifica di KillerWorm; 23-06-2017 a 19:03 Motivo: tag code

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.