为什么我的 CSS3 旋转动画不起作用？

CSS3 旋转动画

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

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

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

<code class="css">@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

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

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

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

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

以上是为什么我的 CSS3 旋转动画不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！