web-dev-qa-db-fra.com

Pouvons-nous modifier la vitesse d'essorage de Font Awesome?

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?

htmlcssanimationcss-animationsfont-awesome
41
FlipFloop

Réponse courte

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>

Réponse plus longue

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>
72
Michael Laszlo

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.

9
RWAM

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

2
deepakssn