Visualizzazione dei risultati da 1 a 2 su 2

Discussione: aiuto con animazione

  1. #1
    Utente di HTML.it L'avatar di leaf
    Registrato dal
    Oct 2012
    Messaggi
    316

    aiuto con animazione

    Ciao a tutti, sto facendo una semplice animazione. Quello che mi serve è miglioare l'effetto della rotazione del testo. Quello che vorrei fare è diminuire il tempo in cui il testo sta fermo (in un senso o nell'altro) e avere un ease-in-out (che non mi pare ora stia funzionando)..insomma rendere l'animazion più smooth..dovrebbe essere una cosa semplice ma ho un po' di confusione in testa e non riesco bene a capire quali parametri devo modificare (percentuali? animation-timing?)

    http://jsfiddle.net/6HCRs/336/

    codice
    codice:
      /* WebKit and Opera browsers */
      @-webkit-keyframes spinner {
        from,5% { -webkit-transform: rotateY(0deg);    }
        15%,45%  { -webkit-transform: rotateY(-180deg); }
        55%, 95%  { -webkit-transform: rotateY(-350deg); }
        to       { -webkit-transform: rotateY(-360deg); }
      }
    
      @keyframes spinner {
        from,5% {
          -moz-transform: rotateY(0);
          -ms-transform: rotateY(0);
          transform: rotateY(0);
        }
        15%,45%  {
          -moz-transform: rotateY(-180deg);
          -ms-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
        }
        55%,95%  {
          -moz-transform: rotateY(-360deg);
          -ms-transform: rotateY(-360deg);
          transform: rotateY(-360deg);
        }
    
        to {
          -moz-transform: rotateY(-360deg);
          -ms-transform: rotateY(-360deg);
          transform: rotateY(-360deg);
        }
      }
    
    
      
        #spinner {
        -webkit-animation-name: spinner;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: ease-in-out;
         -moz-animation-timing-function: ease-in-out;
         
        animation-name: spinner;
        animation-iteration-count: infinite;
        animation-duration: 10s;
        animation-timing-function: ease-in-out;
        
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
      }
    
      #spinner:hover {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
      }
    grazie e buone feste!

    L.

  2. #2
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    devi ridurre i secondi dell'animation-duration

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.