Question

我定义了这个关键帧：

@-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-供应商前缀

Answer 1

添加持续时间：

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

持续时间定义每次旋转所需的时间。如果您未设置the default is zero。

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

根据需要使用CSS3旋转元素

2 个答案: