Animation de rotation CSS sans fin : comment faire pivoter une icône en continu

Pour obtenir une rotation sans fin d'une icône à l'aide de CSS, une combinaison d'animations CSS et les images clés sont requises. Les étapes suivantes décrivent la solution :

1. Ajouter des images clés :

Nous définissons deux images clés, une pour le début de la rotation (0 degrés) et une pour la fin (360 degrés). Cela garantit une transition en douceur.

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

2. Appliquer l'animation :

Nous appliquons l'animation d'image clé créée à l'élément que nous souhaitons faire pivoter à l'aide de la propriété d'animation CSS. Cette propriété nécessite trois paramètres : le nom de l'image clé, la durée et le comportement de la boucle (infini).

  Rotate

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

3. Corriger les problèmes de compatibilité des navigateurs :

Pour garantir la compatibilité entre les différents navigateurs, nous incluons les préfixes des fournisseurs pour les navigateurs basés sur WebKit (Chrome, Safari) et les propriétés standard pour les autres navigateurs.

.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}

En suivant ces étapes, vous pouvez facilement créer des animations de rotation sans fin pour les icônes et autres éléments à l'aide de CSS.