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
grazie e buone feste!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; }
L.

Rispondi quotando