我定义了这个关键帧：
@-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- 供应商前缀
添加持续时间：
.rotate{
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 1s;
}
持续时间定义了每次旋转需要多长时间。如果不设置 1，则默认为 0。
这是工作示例
<!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>