jquery - 按需使用 CSS3 旋转元素

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 .