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
Vous devez vous connecter pour publier un commentaire.
Votre problème ici est que vous avez fourni un
-webkit-TRANSITION-timing-function
lorsque vous voulez un-webkit-ANIMATION-timing-function
. Vos valeurs de 0 à 360 ne fonctionne plus correctement.ease
fonction de temporisation).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.
Vous pouvez utiliser de l'animation comme ceci:
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 de http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
GIF
etCSS
. Ma collection. Si vous en savez plus, s'il vous plaît laissez-moi savoir.Votre 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 test de sous?)
Si possible remplacer la .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.
J'ai fait un petite bibliothèque qui vous permet d'utiliser facilement un throbber sans les images.
Il utilise CSS3 mais retombe sur JavaScript si le navigateur ne le supporte pas.
Exemple.