按需使用 CSS3 旋转元素答案

【问题标题】：Rotate element with CSS3 on demand按需使用 CSS3 旋转元素
【发布时间】：2013-07-07 04:18:23
【问题描述】：

我定义了这个关键帧：

@-moz-keyframes rotate{
    0%{
        -moz-transform: rotate(0deg);   
    }
    100%{
        -moz-transform: rotate(359deg);
    }
}

并应用于类名：

.rotate{
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -moz-animation-name: rotate;
}

并按需将类添加到元素中：

$('a').click(function(){ $(this).addClass('rotate'); });   /* and the class is applied */

但该项目不会旋转；我做错了什么？

请注意：我只在 Firefox 中进行测试，这就是为什么我只使用 -moz- 供应商前缀

【问题讨论】：

有趣，投反对票？

标签： jquery class css animation keyframe

【解决方案1】：

添加持续时间：

.rotate{
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1s;
}

持续时间定义了每次旋转需要多长时间。如果没有设置，the default is zero。

【讨论】：

但我想要它无限...你建议我把它放在哪里？我在 .rotate 类中尝试过，它没有改变任何东西
我刚刚意识到它正在工作！但是孩子没有旋转......知道为什么孩子不会旋转吗？

【解决方案2】：

这是工作示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 1s infinite;
-webkit-animation:myfirst 1s infinite; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:red;transform:rotate(0deg);}
to {background:yellow;transform: rotate(360deg);}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;-webkit-transform:rotate(0deg);}
to {background:yellow;-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

署名：来源来自http://www.w3schools.com/css/css3_animations.asp。

【讨论】：

它根本不使用 OP 的代码。您只是从其他地方复制了一个示例，没有任何评论。
感谢您的时间，但下次您不应该复制粘贴一些代码，而是让 OP 知道他做错了什么（在实际问题代码中）；）（顺便说一句，感谢您的投反对票）