Visualizzazione dei risultati da 1 a 5 su 5

Visualizzazione discussione

  1. #3
    Utente di HTML.it
    Registrato dal
    Oct 2013
    Messaggi
    84
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao.

    Giusto per chiarire: il comando trasform non esiste.
    Forse volevi scrivere transform. Ma anche in quel caso la proprietà transform non ha niente a che fare con animation.

    Forse intendevi transition?
    In questo caso le due cose potrebbero avere delle analogie ma è comunque meglio parlare più propriamente di animation.

    Venendo alla tua richiesta, in linea di massima puoi risolvere impostando inizialmente opacity:0 alle immagini e rivedendo la sequenza di keyframes in modo che anche qui opacity sia inizialmente 0.

    Inoltre il tutto può essere meglio ottimizzato eliminando un po' di codice ridondante.
    Ti posto un esempio concreto. Non mi dilungo su ulteriori spiegazioni ma, se dovessero servire, chiedi pure.
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style>
          @-webkit-keyframes cf4FadeInOut {
             0% {opacity:0}
             8% {opacity:1}
            25% {opacity:1}
            33% {opacity:0}
          }
          @-moz-keyframes cf4FadeInOut {
             0% {opacity:0}
             8% {opacity:1}
            25% {opacity:1}
            33% {opacity:0}
          }
          @-o-keyframes cf4FadeInOut {
             0% {opacity:0}
             8% {opacity:1}
            25% {opacity:1}
            33% {opacity:0}
          }
          @keyframes cf4FadeInOut {
             0% {opacity:0}
             8% {opacity:1}
            25% {opacity:1}
            33% {opacity:0}
          }
          .logo {
            position:relative;
            height:281px;
            width:450px;
            margin:0 auto;
          }
          .logo img {
            position:absolute;
            left:0;
            opacity:0;
            -webkit-animation: cf4FadeInOut  16s ease-in-out infinite;
               -moz-animation: cf4FadeInOut  16s ease-in-out infinite;
                 -o-animation: cf4FadeInOut  16s ease-in-out infinite;
                    animation: cf4FadeInOut  16s ease-in-out infinite;
          }
          .logo img:nth-of-type(1) {
            -webkit-animation-delay: -1.3s;
               -moz-animation-delay: -1.3s;
                 -o-animation-delay: -1.3s;
                    animation-delay: -1.3s;
          }
          .logo img:nth-of-type(2) {
            -webkit-animation-delay: 2.7s;
               -moz-animation-delay: 2.7s;
                 -o-animation-delay: 2.7s;
                    animation-delay: 2.7s;
          }
          .logo img:nth-of-type(3) {
            -webkit-animation-delay: 6.7s;
               -moz-animation-delay: 6.7s;
                 -o-animation-delay: 6.7s;
                    animation-delay: 6.7s;
          }
          .logo img:nth-of-type(4) {
            -webkit-animation-delay: 10.7s;
               -moz-animation-delay: 10.7s;
                 -o-animation-delay: 10.7s;
                    animation-delay: 10.7s;
          }
        </style>
      </head>
      <body>
        <div class="logo" >
          <img src="immagine1.png" alt="" >
          <img src="immagine2.png" alt="" >
          <img src="immagine3.png" alt="" >
          <img src="immagine4.png" alt="" >
        </div>
      </body>
    </html>
    sì hai ragione parlavo di animation....

    Cmq. il codice che hai postato funziona e il risulato è questo:

    http://www.macroweb.it/prova-logo/provalogo2.html

    però non ho capito come hai settato i valori di ".logo img:nth-of-type(1)" soprattutto quelli negativi...
    Ultima modifica di pollat; 30-10-2015 a 12:37

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.