无限旋转图像答案

【问题标题】：Spin image infinitely无限旋转图像
【发布时间】：2014-06-27 11:26:14
【问题描述】：

我有一个像旧电话圆形拨号盘的图像。它里面有8个小圆圈。我想将它旋转 45 度，然后停止一段时间，然后旋转到下一个元素（更多 45 度）......这应该无限继续，并且表盘应该继续旋转。我使用 css 进行旋转，使用 jquery 来触发事件。问题是要无限旋转它。

CSS

.ghoomna1{

-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(45deg) ;

}
.ghoomna2{
-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(90deg) ;
}
.ghoomna3{
-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(135deg) ;
}
.ghoomna4{
-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(180deg) ;
}
.ghoomna5{
-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(225deg) ;
}
.ghoomna6{
-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(270deg) ;
}
.ghoomna7{
-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(315deg) ;
}
.ghoomna8{
-webkit-transition: -webkit-transform 1s;z-index: 100;
-webkit-transform: scale(1,1) rotate(360deg) ;
}

JQUERY

(function( `$` ){
`$`.fn.myfunction = function() {
    `$`("#dial").addClass("ghoomna1").delay(500).queue(function(next){
    `$`("#dial").removeClass("ghoomna1").addClass("ghoomna2").delay(500).queue(function(next){
    `$`("#dial").removeClass("ghoomna2").addClass("ghoomna3").delay(500).queue(function(next){
    `$`("#dial").removeClass("ghoomna3").addClass("ghoomna4").delay(500).queue(function(next){
    `$`("#dial").removeClass("ghoomna4").addClass("ghoomna5").delay(500).queue(function(next){
    `$`("#dial").removeClass("ghoomna5").addClass("ghoomna6").delay(500).queue(function(next){
    `$`("#dial").removeClass("ghoomna6").addClass("ghoomna7").delay(500).queue(function(next){
    `$`("#dial").addClass("ghoomna8");
    next();
    });
    next();
});
    next();
});
    next();
});
    next();
});
    next();
});
    next();
    });
};
}( jQuery ));
$('#dial').myfunction();

【问题讨论】：

如果您不介意使用插件，我建议您使用：creativecouple.github.io/jquery-timing 这是一种处理时间的简单方法，您可以使用 repeat()。
为什么不使用 CSS 动画？您可以将动画设置为无限运行。
似乎重复了stackoverflow.com/questions/18144390/css3-infinite-spin?rq=1
jsfiddle.net/4Rm3K

标签： jquery html css transform

【解决方案1】：

你可以使用 CSS：

http://jsfiddle.net/sa5ZF/

我无法用您发布的代码详细说明您的页面，但这里是如何使用 CSS 无限旋转图像：

HTML

<img class="rotate" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/512px-Cog_font_awesome.svg.png" />

CSS

.rotate {
    -webkit-animation: rotation 2s infinite linear;
            animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

@keyframes rotation {
    from {-ms-transform: rotate(0deg);}
    to   {-ms-transform: rotate(359deg);}

    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

您正在使用多个 id，但所有 CSS 都是相同的，因此我建议您为要旋转的元素添加一个通用类。

另外，使用 jQuery，您可以通过调用随时开始和停止旋转

$('.rotate').removeClass('rotate');
$('.rotate').addClass('rotate');

【讨论】：

【解决方案2】：

查看 CSS animation 与 transition 的对比，后者具有用于重复的 infinite 关键字：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations#Making_it_repeat

【讨论】：