CSS3 Spin Animation

Sie haben die Animationsstile korrekt implementiert, aber Ihre Animation funktioniert nicht, weil Sie keine Keyframes definiert haben die Animation.

CSS3-Animationen erfordern Keyframes, um den Start- und Endstatus der Animation zu definieren.

Um das Problem zu beheben, fügen Sie Keyframes zu Ihrem CSS-Code hinzu. Dadurch wird definiert, wie sich Ihr Element während der Animation verändert. Hier ist ein Beispiel dafür:

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

Dies definiert einen Keyframe, der die Animation bei 0 Grad beginnt und bei 360 Grad endet. Sie können diese Werte anpassen, um den gewünschten Animationseffekt zu erzeugen.

Hier ist eine Demo zur Veranschaulichung der Lösung:

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);
  }
}

Mit diesen Änderungen sollte sich Ihr Element nun kontinuierlich drehen. Denken Sie daran, dass Sie sowohl die Animationsstile als auch die Animations-Keyframes definieren müssen, damit CSS3-Animationen funktionieren.