CSS : faire tourner une image indéfiniment

Comment faire tourner une images, icone, div ou autre éléments à 360 degrés.

Commençons par définir un élément à faire tourner. A noter le nom de la class qui sera utilisé pour l’animation css « rotating ».

<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>

Puis ajoutons le code css suivant ou l’on défini une animation « rotating ».

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 2s linear infinite;
}

L’animation va de 0 à 360 degrés.
animation: rotating 2s linear infinite; => on défini le nom de l’animation, la durée (2 secondes),
le type d’accélération (linear) qui permet d’être régulier,
et infinite qui permet de reproduire l’animation à l’infini.