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