带有javascript计时器的关键帧动画问题，外圈绕内圈旋转有时有效，有时无效

我的动画有问题。基本上，我希望它的工作方式是，在一个圆圈中有三个箭头，绕着一个内圈旋转，每3秒钟它停止3秒钟，然后继续旋转。出于某种原因，它每隔一段时间就会跳过一次旋转，而不是平稳地旋转，它会跳跃，看起来非常不舒服。我非常感谢在这方面的任何帮助，我希望我已经很好地解释了这一点

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>

JS

.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); }
}

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

---

使用javascript对动画进行计时总是很困难，而且通常不可能以精确的方式完成：如果javascript同时忙于其他几个任务，则可能会发生不可预测的延迟。所以我不会依赖javascript

我建议使用纯css：始终及时

测试页：

在这个页面中，我用一个div替换了内圈，只使用css；您不需要tmp图像，只需使用更小/更快的图像（1.5kB而不是36kB）即可替换tmp图像

---

有关背景信息，请参阅：在css tricks.com上。

好的，我设法对这一点有了新的认识，并找到了问题所在。（谢谢Conor）。所以基本上我只需要将动画中的“无限”改为“向前”，这样：

来自

            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;
            }

至

            if(slides == 1) {
                console.log("Check Slides 1: " + slides);
                $(".rotate").css({"animation": "circle-one 3s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-one 3s forwards linear"});
                slides = slides + 1;
            } 
            
            else if (slides == 2) {
                console.log("Check Slides 2: " + slides);
                $(".rotate").css({"animation": "circle-two 3s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-two 3s forwards linear"});
                slides = slides + 1;
            }

            else if (slides == 3) {
                console.log("Check Slides 3: " + slides);
                $(".rotate").css({"animation": "circle-three 3s forwards linear"});
                $(".counterrotate").css({"animation": "ccircle-three 3s forwards linear"});
                slides = 1;
            }

---

我还更新了我的

欢迎来到Stack，Francky。如果可能，请尝试将代码直接粘贴到答案中。链接会随着时间的推移而消失，从而使您的答案失去原来的功效。@Francky我感谢您的帮助这看起来真的很好，但不幸的是，这不是我需要的，事实上临时图像是需要的！而且不需要移动。事实上，圆的红色部分是高亮部分，所以说它是对管理者的高亮，然后在文本框中出现关于管理者的信息，中间的临时图像也改变为关于经理的图片/图标，领导或个人也每个箭头将设置为一个图像映射这肯定需要javascript来做我想要的