I seem to be encountering an issue with an animation. My goal is to have three arrows in a circle that rotate around an inner circle and pause every 3 seconds for another 3 seconds before continuing to rotate. However, instead of rotating smoothly, the animation seems to skip at times, making it look disjointed. Any help on this matter would be greatly appreciated, and I hope my explanation is clear enough.
HTML
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container animation-banner-container">
<div class="row">
<div class="col-md-6">
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
</div>
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
CSS
.animation-banner-container {
height: 450px;
margin-top: -5%;
overflow: hidden !important;
}
.outCircle {
width: 400px;
height: 400px;
background: url('https://gdxdesigns.com/wp-content/uploads/2020/12/Outer-Text.png');
background-size: 400px 400px;
left: 175px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 400px;
height: 400px;
padding: 100px !important;
background: url('https://gdxdesigns.com/wp-content/uploads/2020/12/inner-wheel.png');
background-size: 400px 400px;
}
.counterrotate {
width: 400px;
height: 400px;
background: url('https://gdxdesigns.com/wp-content/uploads/2020/12/temp-img.png');
background-size: 400px 400px;
padding: 150px !important;
margin: -50%;
}
@keyframes circle-one {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(120deg); }
}
@keyframes circle-two {
from { transform: rotateZ(120deg); }
to { transform: rotateZ(240deg); }
}
@keyframes circle-three {
from { transform: rotateZ(240deg); }
to { transform: rotateZ(360deg); }
}
@keyframes ccircle-one {
from { transform: rotateZ(360deg); }
to { transform: rotateZ(240deg); }
}
@keyframes ccircle-two {
from { transform: rotateZ(240deg); }
to { transform: rotateZ(120deg); }
}
@keyframes ccircle-three {
from { transform: rotateZ(120deg); }
to { transform: rotateZ(0deg); }
}
JS
var seconds = 3000;
var tid = setInterval(mycode, seconds);
var start = 1;
var slides = 1;
function mycode(val) {
if(!val) {
/* Controls the Stop and Start */
if(start == 1) {
$(".rotate").css({"animation-play-state": "paused"});
$(".counterrotate").css({"animation-play-state": "paused"});
start = 0;
} else {
$(".rotate").css({"animation-play-state": "running"});
$(".counterrotate").css({"animation-play-state": "running"});
if(slides == 1) {
console.log("Check Slides 1: " + slides);
$(".rotate").css({"animation": "circle-one 3s infinite linear"});
$(".counterrotate").css({"animation": "ccircle-one 3s infinite linear"});
slides = slides + 1;
}
else if (slides == 2) {
console.log("Check Slides 2: " + slides);
$(".rotate").css({"animation": "circle-two 3s infinite linear"});
$(".counterrotate").css({"animation": "ccircle-two 3s infinite linear"});
slides = slides + 1;
}
else if (slides == 3) {
console.log("Check Slides 3: " + slides);
$(".rotate").css({"animation": "circle-three 3s infinite linear"});
$(".counterrotate").css({"animation": "ccircle-three 3s infinite linear"});
slides = 1;
}
start = 1;
} // Close else
/* Close Controls the Stop and Start */
} else {
abortTimer();
tid = setInterval(mycode, seconds);
}
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}