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.