Animation de rotation CSS3

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>

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);}
}

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 .

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/

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;
}

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%);

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

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))

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

cela vous fera répondre à la question