Animation Spin CSS3

Vous avez correctement implémenté les styles d'animation, mais votre animation ne fonctionne pas car vous n'avez pas défini d'images clés pour l'animation.

Les animations CSS3 nécessitent des images clés pour définir les états de début et de fin de l'animation.

Pour résoudre le problème, ajoutez des images clés à votre code CSS. Cela définira comment votre élément se transformera pendant l'animation. Voici un exemple de la façon de procéder :

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Ceci définit une image clé qui commence l'animation à 0 degré et la termine à 360 degrés. Vous pouvez personnaliser ces valeurs pour créer l'effet d'animation souhaité.

Voici une démo pour illustrer la solution :

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Avec ces changements, votre élément devrait désormais tourner en continu. N'oubliez pas que pour que les animations CSS3 fonctionnent, vous devez définir à la fois les styles d'animation et les images clés de l'animation.