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

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.

  • Webkit-code spécifique n'en est pas moins CSS3.. en considérant qu'aucun des autres fournisseurs ne fournissent de l'égalité des fonctions à l'époque 🙂
  • Ne devrait pas l'animation exécuter de 0 à 359? Si il a couru à partir de 0 à 360, alors vous auriez l'image de 0 a joué deux fois, depuis l'image 0 et le cadre de 360 serait le même...
  • D'autre part, si vous allez de 0 à 359, puis l'animation qui devrait avoir lieu à 359.5 est ignoré complètement. Dans la plupart des cas, le chevauchement des 0 et 360 sera tellement rapide que d'être unnoticable.
  • pas nécessairement. Vous pouvez essayer vous-même dans un jsfiddle et de voir qu'en fonction de l'animation de la durée, il peut ne pas être si subtile.
  • cet ensemble de " 359 degrés chose est stupide - vous n'avez aucun contrôle sur l'étape de l'animation. en supposant que 1 seconde d'animation avec 60fps c'est 6 degrés par image donc, vous devez arrêter à '354 degrés". mais comme je l'ai dit vous n'avez pas de contrôle sur le taux de trame ici, donc c'est assez futile. J'imagine une smart la mise en œuvre pourrait détecter 0-360 et d'ajuster en conséquence. J'ai juste multiplié le temps et l'angle par 100 - ie. 0 ° à 36000 degrés de sorte que le théorique problème ne se produisent toutes les 100 rotations. mais j'ai trouvé que vous allez obtenir de l'animation pépins, peu importe ce que vous faites de toute façon
InformationsquelleAutor Gcoop | 2010-04-06