CSS3 rotation continue Animation (tout comme un cadran solaire 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. J'ai l'image qui tourne et qui le fait continuellement, mais il semble y avoir un retard après la fin de l'animation avant de faire la prochaine rotation.
@-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 le ralentissez, disons que 5s est juste plus évident qu'après la première rotation, il y a une pause avant qu'elle ne tourne à nouveau. C'est cette pause dont je veux me débarrasser.
Toute aide est très appréciée, merci.
6 réponses
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 fonctionneront correctement.
Vous remarquerez peut-être aussi un peu de retard parce que 0deg et 360deg sont le même endroit, donc il va de spot 1 dans un cercle à spot 1. C'est vraiment insignifiant, mais pour le réparer, 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);}
}
Aussi ce qui pourrait être plus ressemblant à l'icône de chargement d'apple serait une animation qui fait la transition de l'opacité/couleur des bandes de gris au lieu de faire tourner l'icône.
Vous pouvez utiliser l'animation comme ceci:
-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 astucieux: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html de http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
Votre code semble correct. Je suppose que c'est quelque chose à voir avec le fait que vous utilisez un .png et la façon dont le navigateur redessine l'objet lors de la rotation est inefficace, provoquant le blocage (quel navigateur testez-vous sous?)
Si possible remplacer le .png avec 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 fait une petite bibliothèque {[3] } qui vous permet d'utiliser facilement un throbber sans images.
Il utilise CSS3 mais retombe sur JavaScript si le navigateur ne le supporte pas.
// 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();