CSS3 Continue de Tourner Animation (tout comme un chargement cadran solaire)

Question

Je suis en train de reproduire un style Apple indicateur d'activité (cadran solaire de l'icône de chargement) à l'aide d'un PNG et CSS3 animation. J'ai l'image de la rotation et de le faire en permanence, mais il semble y avoir un délai, après l'animation est terminée avant qu'il ne 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 l'animation de la durée, mais il ne fait aucune différence, si vous ralentir à droite vers le bas dire 5s ses juste de plus en plus apparente après la première rotation, il y a une pause avant elle tourne à nouveau. C'est cette pause je veux me débarrasser de.

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

Answer 1

Votre problème ici est que vous avez fourni, en -webkit-TRANSITION-timing-function lorsque vous voulez un -webkit-ANIMATION-timing-function. Vos valeurs de 0 à 360 ne fonctionne plus correctement.

Answer 2

Vous aussi vous remarquerez peut-être un peu de lag parce que 0deg et 360deg sont au même endroit, donc il va de spot 1 dans un cercle de retour de spot 1. C'est vraiment insignifiant, mais pour le fixer, tout ce que vous avez à faire est de changer 360deg à 359deg

mon jsfiddle illustre votre animation:

Aussi ce qui pourrait être plus ressemblant de la pomme de l'icône de chargement serait une animation que les transitions de l'opacité/la couleur des bandes de gris au lieu de la rotation de l'icône.

Answer 3

Vous pouvez utiliser de l'animation comme ceci:

-webkit-animation: spin 1s infinite linear;

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

Answer 4

Si vous êtes seulement à la recherche d'une version de webkit c'est bien chouette: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html à partir de http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

Answer 5

Ton code semble correct. Je présume que c'est quelque chose à voir avec le fait que vous êtes en utilisant un .png et la manière dont le navigateur retrace l'objet lors de la rotation est inefficace, entraînant le blocage (quel navigateur êtes-vous tester?)

Si possible, remplacez le .png avec quelque chose de maternelle.

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

Chrome me donne pas de pause à l'aide de cette méthode.