Peut-on modifier une Police Génial vitesse de rotation?

J'ai un engrenage qui tourne sur mon site s'affiche avec ce code:

HTML:

<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 de l'engin est trop rapide. Puis-je le modifier avec CSS?

  • Il suffit de garder la police génial icône et ajouter votre propre classe au lieu de fa-spin
InformationsquelleAutor FlipFloop | 2015-12-27
  1. 69

    Réponse courte

    Oui, vous le pouvez. Remplacer le .fa-spin classe sur l'icône avec une nouvelle classe à l'aide de votre propre animation de la règle:

    CSS:

    .slow-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

    HTML:

    <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éponds plus

    Si vous regardez la Police Génial fichier CSS, vous verrez cette règle pour l'animation de rotation:

    .fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

    La règle pour la .fa-spin classe se réfère à la 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;
}

    Maintenant, vous pouvez faire pivoter des éléments HTML à la vitesse de votre choix. Au lieu d'appliquer la classe .fa-spin à un élément, appliquer le .slow-spin classe:

    <i class = "fa fa-cog fa-5x slow-spin"></i>
    • merci! il était très clair!
    • Il semble que l'animation est maintenant appelé a. Si cette réponse n'est pas de travail, je voudrais vous recommandons de vérifier le nom de l'inspecteur.
    InformationsquelleAutor Michael Laszlo
  2. 7

    Pas nécessaire d'utiliser un propre de l'animation ou de la définition de la classe. La vitesse de toutes les animations css peuvent contrôler par la animation-durée propriété css. Utilisez simplement:

    .fa-spin {
  animation-duration: 3s; //or something else
}

    Que plus la valeur est élevée plus la vitesse de l'animation.

    InformationsquelleAutor RWAM
  3. 2

    Similaire à la Michael Laszlo réponse. C'est ce que j'utilise pour le rendre plus rapide pour fa-actualisation de la 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;
}

    - Je utiliser !important pour que je contrôle la spécificité 🙂

    InformationsquelleAutor deepakssn