javascript - 如何使用css和jquery始终顺时针旋转？

Question

我有一个刷新按钮，我希望它在单击时缓慢旋转。所以我想到使用 transition 和 transform，这是我实现的:

#refresh{
  transition:all 2s;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
}
#refresh.rotate{
  transform: rotate(360deg); 
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

$("#refresh").on('click', function() {
  $(this).toggleClass('rotate');
})

这样，当我第一次点击时，它会顺时针旋转，但第二次点击时，它会逆时针旋转，因为它又回到了起点。

所以我将代码更改为:

$("#refresh").on('click', function() {
    $(this).css('transform', 'rotate(360deg)');
});

这一次，第二次和最后一次，当我点击时没有任何反应，因为它已经处于 360 度位置。

如何让刷新按钮每次点击时顺时针旋转？

编辑:JsFiddle

Answer 1

看起来你可以使用animation-iteration-count:Infinite;作为CSS样式来使其永远动画。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count