Question

我有一个像旧电话圆形表盘的图像。它里面有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();

Answer 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');

Answer 2

查看CSS animation而不是transition，其中包含重复的infinite关键字：

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

无限旋转图像

2 个答案: