I have a image like an old telephone circular dial. It has 8 small circles inside it. I want to rotate it 45degrees and then stop for a while and then rotate to the next element (more 45degrees)... This should continue infinitely and the dial should keep on rotating. I have used css for rotation and jquery for triggering the event. The problem is that is to rotate it for infinite time.

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();

```