延迟CSS背景图像更改与JQuery

我真的希望我能解释清楚。

我希望/设想动画如何工作

动画是一个旋转六次的轮子。在每次停止/旋转时，一个三角形的高亮标记应该出现在最右边的图标(如果是时钟，则在3点钟)的右侧，以说明该图标已被选中，并突出显示文本(文本当前不在那里)。

我的问题

虽然我想让它工作的方式目前工作有一个延迟，但是当三角形高亮标记出现时，我希望在旋转停止后尽快出现。下面我有一个JSFiddle作为示例，不过您需要将JSFiddle中的动画打开到全屏才能明白我的意思。只是为了进一步澄清，请看看这个非常短的视频强调我的意思。如果视频有点夸张，我很抱歉，我只是想把我的问题说清楚。

请注意JSFiddle需要全屏打开JSFiddle

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container animation-banner-container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="outCircle">
<div class="rotate">
<div class="counterrotate"></div> 
</div>
</div>
<div class="outCircle">
<div class="imgmap-container">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/inner-circle.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="one" title="one" href="" coords="702,350,824,276,837,299,846,315,852,330,857,344,861,361,865,372,878,378,890,387,900,396,910,405,918,414,922,423,929,431,934,444,938,456,940,472,940,493,936,509,932,524,921,538,915,549,907,561,890,575,870,583,863,604,854,626,840,657,834,673,828,679,702,609,716,572,724,551,730,522,736,471,729,427,718,378" shape="poly">
<area target="" alt="two" title="two" href="" coords="699,608,828,677,816,702,802,722,784,745,764,769,776,791,775,806,774,835,763,864,743,888,716,910,672,920,641,916,606,903,576,873,536,882,480,887,480,737,537,731,587,711,631,685,671,650" shape="poly">
<area target="" alt="three" title="three" href="" coords="481,738,480,887,450,885,413,882,384,876,358,894,330,902,290,902,252,885,222,849,209,811,209,784,175,751,150,720,132,694,127,685,253,612,285,654,323,689,354,710,409,729,448,736" shape="poly">
<area target="" alt="four" title="four" href="" coords="251,612,125,687,109,653,96,617,87,591,48,574,16,538,2,488,7,452,21,420,44,392,74,377,85,371,101,331,111,311,120,293,126,281,246,351,231,383,222,417,215,457,214,504,226,557" shape="poly">
<area target="" alt="five" title="five" href="" coords="125,280,247,352,277,305,310,275,339,255,382,234,413,222,442,218,466,217,476,217,474,76,432,80,406,83,388,86,372,70,341,51,297,46,253,57,225,75,205,104,192,135,192,179,195,192,167,221,146,246" shape="poly">
<area target="" alt="six" title="six" href="" coords="475,218,474,76,507,77,548,82,574,50,607,32,642,25,672,28,698,37,722,53,744,74,756,99,765,135,762,165,754,188,782,216,798,235,815,257,826,278,802,292,755,318,713,343,702,349,659,293,622,260,569,235,521,222" shape="poly">
</map>
</div>
</div><!-- Close Outer Circle -->
</div>
<div class="col-lg-6 col-md-12">
<div class="highlight-container">
</div>
</div>
</div>
</div>

CSS

.animation-banner-container {
height: 600px;
}
.highlight-container {
height: 600px;
background-size: cover !important;
margin-left: -15% !important;
}
.counterrotate {
width: 500px;
height: 500px;
background: url('https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/alarm-inner.png');
background-size: 500px 500px;
background-repeat: no-repeat !important;
padding: 150px !important;
}
.rotate {
width: 500px;
height: 500px;
background-size: 500px 500px;
}
.outCircle  {
width: 500px;
height: 500px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
z-index: 2;
pointer-events: none;
}
.imgmap-container{
position: relative;
width: 500px !important;
height: 500px !important;
z-index: 1;
}
.imgmap-container img{
width: 500px;
height: 500px;
}
.img-map area:focus {
outline: 0 !important;
}
@keyframes circle-one {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(60deg); }
}
@keyframes circle-two {
from { transform: rotateZ(60deg); }
to { transform: rotateZ(120deg); }
}
@keyframes circle-three {
from { transform: rotateZ(120deg); }
to { transform: rotateZ(180deg); }
}
@keyframes circle-four {
from { transform: rotateZ(180deg); }
to { transform: rotateZ(240deg); }
}
@keyframes circle-five{
from { transform: rotateZ(240deg); }
to { transform: rotateZ(300deg); }
}
@keyframes circle-six {
from { transform: rotateZ(300deg); }
to { transform: rotateZ(360deg); }
}
@keyframes ccircle-one {
from { transform: rotateZ(360deg); }
to { transform: rotateZ(300deg); }
}
@keyframes ccircle-two {
from { transform: rotateZ(300deg); }
to { transform: rotateZ(240deg); }
}
@keyframes ccircle-three {
from { transform: rotateZ(240deg); }
to { transform: rotateZ(180deg); }
}
@keyframes ccircle-four {
from { transform: rotateZ(180deg); }
to { transform: rotateZ(120deg); }
}
@keyframes ccircle-five {
from { transform: rotateZ(120deg); }
to { transform: rotateZ(60deg); }
}
@keyframes ccircle-six {
from { transform: rotateZ(60deg); }
to { transform: rotateZ(0deg); }
}

Javascript/JQuery

var seconds = 8000;
var tid = setInterval(mycode, seconds);
// Deterimes whether to start or stop
var start = 1;
// Set to first Slide
var slides = 1;
function mycode(val) {
if(!val) {
/* Controls the Stop and Start */
if(start == 0) {
$(".rotate").css({"animation-play-state": "paused"});
$(".counterrotate").css({"animation-play-state": "paused"});
$(".imgmap-container").css({"animation-play-state": "paused"});
$(".highlight-container").css({"background":"url('https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/highlight.png')"});
// Starts the Animation
start = 1;
} 

else {
// Plays Animations
$(".rotate").css({"animation-play-state": "running"});
$(".counterrotate").css({"animation-play-state": "running"});
$(".imgmap-container").css({"animation-play-state": "running"});
$(".highlight-container").css({"background":"none"});

console.log("Rotating");
if(slides == 1) {
console.log("Slide 1");
/* Animations */
$(".rotate").css({"animation": "circle-two 4s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-two 4s forwards linear"});
$(".imgmap-container").css({"animation": "circle-two 4s forwards linear"});

// Increments to Next Slide
slides = slides + 1;
} 

else if (slides == 2) {
console.log("Slide 2");
$(".rotate").css({"animation": "circle-three 4s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-three 4s forwards linear"});
$(".imgmap-container").css({"animation": "circle-three 4s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 3) {
console.log("Slide 3");
$(".rotate").css({"animation": "circle-four 4s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-four 4s forwards linear"});
$(".imgmap-container").css({"animation": "circle-four 4s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 4) {
console.log("Slide 4");
$(".rotate").css({"animation": "circle-five 4s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-five 4s forwards linear"});
$(".imgmap-container").css({"animation": "circle-five 4s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 5) {
console.log("Slide 5");
$(".rotate").css({"animation": "circle-six 4s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-six 4s forwards linear"});
$(".imgmap-container").css({"animation": "circle-six 4s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 6) {
console.log("Slide 6");
$(".rotate").css({"animation": "circle-one 4s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-one 4s forwards linear"});
$(".imgmap-container").css({"animation": "circle-one 4s forwards linear"});
slides = 1;
}

// Pauses the Animation
start = 0;

} // Close else
/* Close Controls the Stop and Start */
} 

else {
abortTimer();
tid = setInterval(mycode, seconds);
}
if(val == 1 || val == 2 || val == 3 || val == 4 || val == 5 || val == 6) {
slides = val;
start = 1;
mycode();
}
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}
$(document).ready(function(){
slides = 1;
mycode();
});

// Seconds between each Animation

var seconds = 6000;
var tid = setInterval(mycode, seconds);
// Deterimes whether to start or stop
var start = 1;
// Set to first Slide
var slides = 1;
function mycode(val) {
if(!val) {
/* Controls the Stop and Start */
if(start == 0) {
$(".rotate").css({"animation-play-state": "paused"});
$(".counterrotate").css({"animation-play-state": "paused"});
$(".imgmap-container").css({"animation-play-state": "paused"});
$(".highlight-container").css({"background":"url('https://wordpress-84115-2057283.cloudwaysapps.com/wp-content/uploads/2021/08/highlight.png')"});
// Starts the Animation
start = 1;
} 

else {
// Plays Animations
$(".rotate").css({"animation-play-state": "running"});
$(".counterrotate").css({"animation-play-state": "running"});
$(".imgmap-container").css({"animation-play-state": "running"});
$(".highlight-container").css({"background":"none"});

console.log("Rotating");
if(slides == 1) {
console.log("Slide 1");
/* Animations */
$(".rotate").css({"animation": "circle-two 6s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-two 6s forwards linear"});
$(".imgmap-container").css({"animation": "circle-two 6s forwards linear"});

// Increments to Next Slide
slides = slides + 1;
} 

else if (slides == 2) {
console.log("Slide 2");
$(".rotate").css({"animation": "circle-three 6s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-three 6s forwards linear"});
$(".imgmap-container").css({"animation": "circle-three 6s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 3) {
console.log("Slide 3");
$(".rotate").css({"animation": "circle-four 6s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-four 6s forwards linear"});
$(".imgmap-container").css({"animation": "circle-four 4s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 4) {
console.log("Slide 4");
$(".rotate").css({"animation": "circle-five 6s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-five 6s forwards linear"});
$(".imgmap-container").css({"animation": "circle-five 6s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 5) {
console.log("Slide 5");
$(".rotate").css({"animation": "circle-six 6s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-six 6s forwards linear"});
$(".imgmap-container").css({"animation": "circle-six 6s forwards linear"});
// Increments to Next Slide
slides = slides + 1;
}
else if (slides == 6) {
console.log("Slide 6");
$(".rotate").css({"animation": "circle-one 6s forwards linear"});
$(".counterrotate").css({"animation": "ccircle-one 6s forwards linear"});
$(".imgmap-container").css({"animation": "circle-one 6s forwards linear"});
slides = 1;
}

// Pauses the Animation
start = 0;

} // Close else
/* Close Controls the Stop and Start */
} 

else {
abortTimer();
tid = setInterval(mycode, seconds);
}
if(val == 1 || val == 2 || val == 3 || val == 4 || val == 5 || val == 6) {
slides = val;
start = 1;
mycode();
}
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}
$(document).ready(function(){
slides = 1;
mycode();
});