CSS3 Spin Animation

您已正确实现动画样式，但您的动画无法正常工作，因为您尚未定义关键帧动画。

CSS3 动画需要关键帧来定义动画的开始和结束状态。

要解决此问题，请将关键帧添加到 CSS 代码中。这将定义您的元素在动画期间如何变换。以下是如何执行此操作的示例：

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

这定义了一个关键帧，该关键帧以 0 度开始动画并以 360 度结束。您可以自定义这些值来创建所需的动画效果。

这里有一个演示来说明解决方案：

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

通过这些更改，您的元素现在应该连续旋转。请记住，要使 CSS3 动画正常工作，您需要定义动画样式和动画关键帧。