CSS3 旋转动画不起作用：为什么我的关键帧丢失？

CSS3 旋转动画：为什么不起作用

您遇到了 CSS3 旋转动画在代码中无法运行的问题。在进行故障排除之前，了解 CSS3 动画背后的基本原理至关重要。

使用 CSS3 动画关键帧

要利用 CSS3 动画的强大功能，定义动画关键帧至关重要。关键帧指定动画元素在整个动画中的不同时间间隔应如何显示。在您的代码中，您引用了名为“spin”的动画，但这些关键帧尚未定义。

请参阅官方 Mozilla 开发人员指南 (https://developer.mozilla.org/en- US/docs/CSS/Tutorials/Using_CSS_animations) 了解有关 CSS 动画关键帧的详细信息。

实现

这里添加了关键帧的片段，用于演示如何实现旋转动画有效实现：

HTML:

<code class="html"><div></div></code>

CSS:

<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>

在此代码中，我们使用“from”定义“旋转”动画关键帧和“到”选择器。这些指定元素将从 0 度旋转开始，并在动画持续时间内逐渐旋转到 360 度。

通过合并此关键帧定义，您将使旋转动画能够按照代码中的预期运行.

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