Animation de rotation CSS3

Question

J'ai examiné pas mal de démos et je ne sais pas pourquoi je ne parviens pas à faire tourner CSS3. J'utilise la dernière version stable de Chrome.

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

Le CSS:

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

Le HTML:

 <div></div>
 

Answer 1

Pour utiliser CSS3 Animation, vous devez également définir l'animation d'images clés (que vous avez appelé spin)

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

Une fois que vous avez configuré l'animation du calendrier, vous devez définir l'apparence de l'animation. Ceci est fait par la création de deux ou plusieurs images clés à l'aide de l' @keyframes à la règle. Chaque image-clé décrit comment l'animation élément doit rendre à un moment donné au cours de la séquence d'animation.

---

Démonstration à l' 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);}
}

Answer 2

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 réellement faire beaucoup de choses vraiment cool avec ça. En voici un que j'ai fait plus tôt .

:)

NB: Vous pouvez ne pas avoir à écrire tous les préfixes si vous utilisez -prefix-free .

Answer 3

Pour effectuer une rotation, 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