Animation de rotation CSS3


158

J'ai examiné pas mal de démos et je n'ai aucune idée de la raison pour laquelle je ne peux pas faire fonctionner le spin CSS3. J'utilise la dernière version stable de Chrome.

Le violon: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}
<div></div>

Réponses:


299

Pour utiliser l'animation CSS3, vous devez également définir les images clés d'animation réelles ( que vous avez nomméesspin )

Lisez https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations pour plus d'informations

Une fois que vous avez configuré le timing de l'animation, vous devez définir l'apparence de l'animation. Cela se fait en établissant deux images clés ou plus à l'aide de la @keyframesrègle at. Chaque image clé décrit comment l'élément animé doit être rendu à un moment donné pendant la séquence d'animation.


Démo sur http://jsfiddle.net/gaby/9Ryvs/7/

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

9
Vous obtenez le ✓ parce que vous l'avez expliqué le mieux et que vous êtes la seule réponse qui inclut toutes les versions préfixées.
iambriansreed

53
C'est super pointilleux, mais vous devriez vraiment l'animer à 359 degrés. 360 et 0 degrés sont les mêmes radialement, de sorte que l'animation s'arrêterait très brièvement à un tour complet.
Adam Grant

1
@AdamGrant Merci, cela m'a presque causé un mal de tête aujourd'hui lol
mattslone

5
Vous voulez animer à 359,9999999999 degrés, pas 359. Les degrés de rotation sont une plage continue de [0, 360) et si vous tournez à 359,0, vous aurez une graduation de 1 degré au début de chaque rotation quand il se déforme de 359 à 0 .
mdonoughe

16
Pour clarifier tous ces commentaires qui donnent des informations incorrectes ... la réponse choisie EST CORRECT sans modifications. 0 et 360 degrés sont en fait différents aux yeux du navigateur, tout en étant toujours au même point. Par exemple, si vous essayez de le faire pivoter de 0deg à 0deg (ou 360deg à 360deg), il ne tournera pas du tout. Le faire pivoter de 0deg à 360deg indique au navigateur de faire pivoter l'objet sur 360 degrés avant de terminer l'animation. Définissez le animation-iteration-count: infinite;et vous aurez des images infinies dans l'animation. Même une rotation de 20 minutes aura l'air impeccable et lisse.
jacurtis

28

Vous n'avez spécifié aucune image clé. Je l'ai fait fonctionner ici .

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

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

Vous pouvez en fait faire beaucoup de choses vraiment cool avec ça. En voici une que j'ai faite plus tôt .

:)

NB Vous pouvez éviter d'avoir à écrire tous les préfixes si vous utilisez -prefix-free .


17

Depuis la dernière version de Chrome / FF et sur IE11, il n'est pas nécessaire d'utiliser le préfixe -ms / -moz / -webkit. Voici un code plus court (basé sur les réponses précédentes):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Démo en direct: http://jsfiddle.net/9Ryvs/3057/


5
Combinez les règles d'animation avec la sténographie animation: spin 4s linear infinite.
Josh Habdas

10

HTML avec un glyphicon génial.

<span class="fa fa-spinner spin"></span>

CSS

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}

1
Vous obtenez également mon vote positif pour l'ajout de la définition de .spin
Blair Connolly

6

La seule réponse qui donne le bon 359deg:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

Voici un dégradé utile pour que vous puissiez prouver qu'il tourne (s'il s'agit d'un cercle):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

4

Pour faire pivoter, vous pouvez utiliser des images clés et une transformation.

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

Exemple


4

Par souci de finalisation, voici un exemple Sass / Compass qui raccourcit vraiment le code, le CSS compilé inclura les préfixes nécessaires etc.

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.