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.