web-dev-qa-db-fra.com

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

J'essaie de reproduire un Apple (icône de chargement de cadran solaire)) à l'aide d'une animation PNG et CSS3. J'ai l'image en rotation et je la fais continuellement, mais un délai l'animation est terminée avant 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 la ralentissez tout de suite, par exemple 5 secondes, il est 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.

cssanimationwebkitcss3transform
120
Gcoop

Votre problème ici est que vous avez fourni un -webkit-TRANSITION-timing-function quand vous voulez un -webkit-ANIMATION-timing-function. Vos valeurs de 0 à 360 fonctionneront correctement.

71
rrahlf

Vous remarquerez peut-être aussi un peu de décalage, car 0deg et 360deg sont au même endroit, donc cela passe du premier au dernier cercle. Il est vraiment insignifiant, mais pour le corriger, il vous suffit de changer de 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 davantage à l'icône de chargement Apple) serait une animation qui permet de faire la transition entre l'opacité/la couleur des bandes de gris au lieu de faire pivoter l'icône.

53
Ilan Biala

Vous pouvez utiliser une animation comme ceci:

-webkit-animation: spin 1s infinite linear;

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

Si vous cherchez seulement une version de webkit, c'est très pratique: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html de http: // 37signals .com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

8
Tudor

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

Si possible, remplacez le fichier .png par un élément natif.

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

Chrome ne me donne aucune pause en utilisant cette méthode.

1
Alex

J'ai fait un 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 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();

Exemple .

1
alex