Comment créer une animation de rotation CSS sans fin pour une icône ?

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.

<code class="css">@-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);
  }
}</code>

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

<code class="html"><div class="rotating">
  Rotate
</div></code>

<code class="css">.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

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.

<code class="css">.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 */
}</code>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!