Animazione di rotazione continua CSS3 (proprio come una meridiana di caricamento)

Question

Sto tentando di replicare un indicatore di attività in stile Apple (icona di caricamento della meridiana) utilizzando un'animazione PNG e CSS3. Ho l'immagine che ruota e la eseguo continuamente, ma sembra esserci un ritardo dopo che l'animazione è terminata prima di fare la prossima rotazione.

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 
#loading img 
{ 
    -webkit-animation-name:    rotate; 
    -webkit-animation-duration:   0.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function: linear; 
    } 

Ho provato a cambiare la durata animazione, ma non fa differenza se si rallenta proprio giù dire 5s suo solo più evidente che dopo la prima rotazione c'è una pausa prima ruota nuovamente. È questa la pausa di cui voglio liberarmi.

Qualsiasi aiuto è molto apprezzato, grazie.

Answer 1

Il tuo problema qui è che hai fornito un -webkit-TRANSITION-timing-function quando vuoi un -webkit-ANIMATION-timing-function. I tuoi valori da 0 a 360 funzioneranno correttamente.

Answer 2

Il tuo codice sembra corretto. Suppongo che sia qualcosa a che fare con il fatto che stai usando un file .png e il modo in cui il browser ridisegna l'oggetto a rotazione è inefficiente, causando il blocco (quale browser stai testando sotto?)

Se possibile, sostituire il .png con qualcosa di nativo.

vedere; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome non mi dà pause utilizzando questo metodo.

Answer 3

Se siete solo in cerca di una versione webkit questo è ingegnoso: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html da http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

Answer 4

Si potrebbe anche notare un po 'di ritardo a causa 0deg e 360deg sono nello stesso punto, quindi sta andando dal punto 1 in un cerchio torna a individuare 1. E 'davvero insignificante, ma per risolvere il problema, tutto quello che dovete fare è cambiare 360deg a 359deg

my jsfiddle illustrates your animation:

#myImg { 
    -webkit-animation: rotation 2s infinite linear; 
} 

@-webkit-keyframes rotation { 
    from {-webkit-transform: rotate(0deg);} 
    to {-webkit-transform: rotate(359deg);} 
} 

anche quello che potrebbe essere più somigliante del ico mela carico n sarebbe un'animazione che transiziona l'opacità/colore delle strisce di grigio invece di ruotare l'icona.

Answer 5

Ho creato un small library che consente di utilizzare facilmente un fotogramma senza immagini.

Usa CSS3 ma ricade su JavaScript se il browser non lo supporta.

// First argument is a reference to a container element in which you 
// wish to add a throbber to. 
// Second argument is the duration in which you want the throbber to 
// complete one full circle. 
var throbber = throbbage(document.getElementById("container"), 1000); 

// Start the throbber. 
throbber.play(); 

// Pause the throbber. 
throbber.pause(); 

Example.

Answer 6

Si potrebbe utilizzare l'animazione in questo modo:

-webkit-animation: spin 1s infinite linear; 

@-webkit-keyframes spin { 
    0% {-webkit-transform: rotate(0deg)} 
    100% {-webkit-transform: rotate(360deg)} 
}