J'ai un équipement de filature sur mon site Web affiché avec ce code:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x fa-spin"></i>
Personnellement, je pense que la vitesse du train est trop rapide. Puis-je le modifier avec CSS?
Oui, vous pouvez. Remplace le .fa-spin
classe sur l'icône avec une nouvelle classe en utilisant votre propre règle d'animation:
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x slow-spin"></i>
Si vous regardez le Font Awesome CSS file
, vous verrez cette règle pour faire tourner l'animation:
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
La règle pour le .fa-spin
classe fait référence à fa-spin
images clés:
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Vous pouvez utiliser les mêmes images clés dans une classe différente. Par exemple, vous pouvez écrire la règle suivante pour une classe appelée .slow-spin
:
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
Vous pouvez maintenant faire pivoter les éléments HTML à la vitesse de votre choix. Au lieu d'appliquer la classe .fa-spin
à un élément, appliquez le .slow-spin
classe:
<i class = "fa fa-cog fa-5x slow-spin"></i>
Pas nécessaire d'utiliser une propre animation ou définition de classe. La vitesse de toute animation css peut être contrôlée par la propriété animation-duration css. Utilisez simplement:
.fa-spin {
animation-duration: 3s; // or something else
}
Plus la valeur est élevée, plus la vitesse d'animation est faible.
Similaire à la réponse de Michael Laszlo. C'est ce que j'utilise pour accélérer le rafraîchissement du fa car le fa-spin par défaut est très lent.
.fa-spin {
-webkit-animation: fa-spin 0.75s infinite linear !important;
animation: fa-spin 0.75s infinite linear !important;
}
J'utilise! Important pour que je contrôle la spécificité :)