How to stop CSS Animation in Specific place on the Path. Without Timing

Question

How to stop animation at 50% for 2s and then resume the way##

P.S. setInterval method is not suitable!!!!

            function pausee() {
                document.getElementById("0").style.animationPlayState = "paused";
            };var myStop = setInterval(pausee, 2200);

            

            function Runn() {
                document.getElementById("0").style.animationPlayState = "running";
                }; var myContinue = setInterval(Runn, 2600);

@keyframes FourthBallStarting {
0% {
offset-distance: 0%;
visibility: hidden;
transform: rotateZ(0);
opacity: 0;
}
12.5%{
offset-distance: 3%;
opacity: 1.0;
visibility: visible;
}
50% {
transform: scaleY(3);
}
90% {
offset-distance: 23%;
opacity: 1;
visibility: visible;
} 99%,100% {
offset-distance: 25%;
visibility: hidden;
transform: rotateZ(-90deg);
opacity: 0;
}
}
.ball {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
border-radius: 50%;
border: 1px solid black;
animation-fill-mode: forwards;
offset-path: path("M445 1.5C503.241 1.5 560.912 12.9715 614.72 35.2594C668.528 57.5474 717.419 90.2154 758.602 131.398C799.785 172.581 832.453 221.472 854.741 275.28C877.029 329.088 888.5 386.759 888.5 445C888.5 503.241 877.029 560.912 854.741 614.72C832.453 668.528 799.785 717.419 758.602 758.602C717.419 799.785 668.528 832.453 614.72 854.741C560.912 877.029 503.241 888.5 445 888.5C386.759 888.5 329.088 877.028 275.28 854.741C221.472 832.453 172.581 799.785 131.398 758.602C90.2152 717.419 57.5473 668.528 35.2593 614.72C12.9714 560.912 1.49997 503.241 1.5 445C1.50003 386.759 12.9715 329.088 35.2595 275.28C57.5475 221.472 90.2155 172.581 131.398 131.398C172.581 90.2152 221.472 57.5473 275.28 35.2593C329.088 12.9714 386.759 1.49996 445 1.5L445 1.5Z");
margin-left: -70px;
}

            <div id="SpinningImages" class="SpinningImages">
            </div>
            <div id="BigCircle" >

            </div>


        </div>

`

            var x = document.createElement("IMG");

            x.setAttribute("src", imgArray[0].src);

            x.classList.add("ball");

            x.setAttribute("id", "0");

            x.setAttribute("style", "animation: FourthBallStarting 2s linear normal infinite;");

            x.setAttribute("alt", "Image");

            x.style.animationFillMode = "forwards";

            document.getElementById("SpinningImages").appendChild(x);

`

Answer 1

does this helps ?

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';

/* ... more images ... */

imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';

var x = document.createElement("IMG");

            x.setAttribute("src", imgArray[0].src);

            x.classList.add("ball");

            x.setAttribute("id", "0");

            x.setAttribute("style", "animation: FourthBallStarting 2s linear normal infinite;");

            x.setAttribute("alt", "Image");

            x.style.animationFillMode = "forwards";

            document.getElementById("SpinningImages").appendChild(x);

@keyframes FourthBallStarting {
0% {
offset-distance: 0%;
visibility: hidden;
transform: rotateZ(0);
opacity: 0;
}
12.5%{
offset-distance: 3%;
opacity: 1.0;
visibility: visible;
}
15% {
offset-distance: 3%;
opacity: 1.0;
visibility: visible;}
50% {
offset-distance: 3%;
opacity: 1.0;
visibility: visible;}
80% {
transform: 0;
}
90% {
offset-distance: 23%;
opacity: 1;
visibility: visible;
} 99%,100% {
offset-distance: 25%;
visibility: hidden;
transform: rotateZ(-90deg);
opacity: 0;
}
}
.ball {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%;
border: 1px solid black;
animation-fill-mode: forwards;
offset-path: path("M445 1.5C503.241 1.5 560.912 12.9715 614.72 35.2594C668.528 57.5474 717.419 90.2154 758.602 131.398C799.785 172.581 832.453 221.472 854.741 275.28C877.029 329.088 888.5 386.759 888.5 445C888.5 503.241 877.029 560.912 854.741 614.72C832.453 668.528 799.785 717.419 758.602 758.602C717.419 799.785 668.528 832.453 614.72 854.741C560.912 877.029 503.241 888.5 445 888.5C386.759 888.5 329.088 877.028 275.28 854.741C221.472 832.453 172.581 799.785 131.398 758.602C90.2152 717.419 57.5473 668.528 35.2593 614.72C12.9714 560.912 1.49997 503.241 1.5 445C1.50003 386.759 12.9715 329.088 35.2595 275.28C57.5475 221.472 90.2155 172.581 131.398 131.398C172.581 90.2152 221.472 57.5473 275.28 35.2593C329.088 12.9714 386.759 1.49996 445 1.5L445 1.5Z");
margin-left: -410px;
}

`

<div id="SpinningImages" class="SpinningImages">
            </div>
            <div id="BigCircle" >

            </div>