CSS3 Animation Spin

J’ai passé en revue pas mal de démos et je ne sais pas pourquoi je ne parviens pas à faire fonctionner le 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); } 
 

    Pour utiliser l’animation CSS3, vous devez également définir les images clés d’animation ( que vous avez nommées spin ).

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

    Une fois que vous avez configuré la synchronisation de l’animation, vous devez définir l’apparence de l’animation. Cela se fait en établissant deux ou plusieurs images clés à l’aide de la règle @keyframes . 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 réellement faire beaucoup de choses vraiment cool avec ça. En voici un que j’ai fait plus tôt .

    🙂

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

    Comme pour 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 glyphicon

      

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

    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

    Pour des raisons de complétude, voici un exemple de 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))