问:为什么我无法让 CSS3 旋转动画工作,即使使用最新的 Chrome ?
A: 要使用 CSS3 动画,除了初始配置之外,还必须定义动画关键帧。
CSS3 动画是通过使用关键帧来实现的,关键帧指定元素的样式如何随时间变换。要使用 CSS3 动画,您必须定义动画计时和关键帧。
要创建旋转动画,您必须定义从元素开始逐渐旋转元素的关键帧。起点到终点。您可以使用 @keyframes 规则来执行此操作。
下面是一个示例:
<code class="css">@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }</code>
此动画关键帧将元素从 0 度旋转到 360 度,从而创建旋转动画。
定义动画关键帧后,您可以在 HTML 元素的动画声明中使用它们。
<code class="css">div { /* Animation timing settings */ animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; }</code>
通过结合动画计时和关键帧定义,您现在拥有一个正常运行的 CSS3 旋转动画。
以上是以下是一些标题选项,重点关注旋转动画不起作用的问题: 简单直接的详细内容。更多信息请关注PHP中文网其他相关文章!