Animation de rotation continue CSS3 (comme un cadran de chargement)

J'essaie de reproduire un indicateur d'activité de style Apple (icône de chargement du cadran solaire) en utilisant une animation PNG et CSS3. L'image tourne et le fait en continu, mais il semble y avoir un délai après la fin de l'animation avant de faire 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 la ralentissez, disons 5 secondes, il est juste 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 un -webkit-TRANSITION-timing-functionlorsque vous voulez un fichier -webkit-ANIMATION-timing-function. Vos valeurs de 0 à 360 fonctionneront correctement.

Vous remarquerez peut-être également un petit décalage car 0deg et 360deg sont au même endroit, donc cela va du point 1 dans un cercle au point 1. C'est vraiment insignifiant, mais pour y remédier, tout ce que vous avez à faire est 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);}
}

De plus, ce qui pourrait ressembler le plus à l'icône de chargement de pomme serait une animation qui transforme l'opacité / la couleur des rayures 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 recherchez uniquement une version du kit Web, c'est bien: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html depuis http://37signals.com/svn/posts/2577-loading- spinner-animation-using-css-and-webkit

Votre code semble correct. Je suppose que cela a quelque chose à voir avec le fait que vous utilisez un .png et que la façon dont le navigateur redessine l'objet lors de la rotation est inefficace, ce qui provoque le blocage (sous quel navigateur testez-vous?)

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 donne aucune pause en utilisant cette méthode.

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

Il utilise CSS3 mais retombe sur 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 .