CSS3 Rotation continue (comme un cadran solaire de chargement)

J’essaie de reproduire un indicateur d’activité Apple (icône de chargement du cadran solaire) en utilisant une animation PNG et CSS3. J’ai la rotation de l’image en continu, mais il semble y avoir un délai après la fin de l’animation avant la rotation suivante.

@-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; } 

J’ai essayé de changer la durée de l’animation, mais cela ne fait aucune différence. Si vous ralentissez le rythme, dites 5s, c’est plus évident qu’après la première rotation, il y a une pause avant de tourner à nouveau. C’est cette pause dont je veux me débarrasser.

Toute aide est très appréciée, merci.

Votre problème ici est que vous avez fourni une fonction -webkit-TRANSITION-timing-function lorsque vous voulez une fonction -webkit-ANIMATION-timing-function . Vos valeurs de 0 à 360 fonctionneront correctement.

Vous remarquerez peut-être aussi un peu de retard car 0deg et 360deg sont au même endroit, donc il va de spot 1 dans un cercle à spot 1. Il est vraiment insignifiant, mais pour le réparer, il suffit de changer 360deg en 359deg

mon jsfiddle illustre votre animation:

 #myImg { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } 

En outre, ce qui pourrait ressembler davantage à l’icône de chargement d’Apple serait une animation qui transforme l’opacité / la couleur des bandes de gris au lieu de faire pivoter l’icône.

Vous pouvez utiliser une animation comme celle-ci:

 -webkit-animation: spin 1s infinite linear; @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg)} } 

Si vous cherchez seulement une version webkit, c’est pratique: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html de http://soffr.miximages.com/css/pp Votre code semble correct. Je suppose que cela a quelque chose à voir avec le fait que vous utilisez un fichier .png et que la façon dont le navigateur redessine l’object lors de la rotation est inefficace, provoquant le blocage (quel navigateur testez-vous sous?)

Si possible, remplacez le .png par quelque chose de natif.

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

Chrome ne me laisse pas de pause en utilisant cette méthode.

J’ai créé une petite bibliothèque qui vous permet d’utiliser facilement un lanceur sans images.

Il utilise CSS3 mais retombe en JavaScript si le navigateur ne le prend pas en charge.

 // 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(); 

Exemple