如何在路径的特定位置停止 CSS 动画。无定时

Question

如何让动画在50%停止2s然后继续播放##

P.S。 setInterval 方法不合适!!!!

            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% {
偏移距离：0%；
可见性：隐藏；
变换：rotateZ(0);
不透明度：0；
}
12.5%{
偏移距离：3%；
不透明度：1.0；
能见度：可见；
}
50% {
变换：scaleY(3);
}
90% {
偏移距离：23%；
不透明度：1；
能见度：可见；
} 99%,100%{
偏移距离：25%；
可见性：隐藏；
变换：旋转 Z（-90 度）；
不透明度：0；
}
}
.ball {
位置：绝对；
宽度：150px;
高度：150px;
z-index: 1;
边界半径：50%；
边框：1px 纯黑色；
动画填充模式：转发；
偏移路径：路径（"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"）；
左边距：-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

这有帮助吗？

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>

如何在路径的特定位置停止 CSS 动画。无定时

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

html

javascript

css

keyframe

css-animations

如何让动画在50%停止2s然后继续播放##

P.S。 setInterval 方法不合适!!!!