为什么我的 CSS3 旋转动画无法在 Chrome 中运行？

CSS3 旋转动画

在您提供的 HTML 代码中，您已将各种 CSS3 动画属性应用于 div 元素。然而，尽管使用了最新稳定版本的 Chrome，动画似乎仍无法正常运行。

了解 CSS3 动画

要有效地使用 CSS3 动画，您必须遵循特定的步骤顺序：

1. 定义动画属性：您必须定义元素的动画属性，例如动画名称、动画持续时间、动画迭代计数和动画计时-函数，正如您在代码中所做的那样。
2. 定义动画关键帧（代码中缺少）：您需要使用 @keyframes 规则建立实际的动画关键帧。关键帧定义元素在动画序列期间的特定点应如何显示。
3. 浏览器兼容性：确保您使用的浏览器支持 CSS3 动画。大多数现代浏览器（包括 Chrome）都支持此功能。

解决方案：添加关键帧

在代码中，您定义了动画属性，但没有定义动画关键帧。要解决此问题，请添加以下关键帧规则：

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

此关键帧规则指定元素在动画期间应从 0 度旋转到 360 度。

演示

添加关键帧规则后，您的代码现在应如下所示：

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

<code class="css">div {
    ... (same animation properties as before)
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}</code>

此代码应为 div 元素生成旋转动画。

以上是为什么我的 CSS3 旋转动画无法在 Chrome 中运行？的详细内容。更多信息请关注PHP中文网其他相关文章！