如何在路径上的特定位置停止 CSS 动画。没有时间

Posted 2023-03-28

【中文标题】如何在路径上的特定位置停止 CSS 动画。没有时间

【英文标题】：How to stop CSS Animation in Specific place on the Path. Without Timing

【发布时间】：2021-05-08 02:25:56

【问题描述】：

如何在 50% 处停止动画 2 秒然后恢复原路##

附注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%； 可见性：隐藏； 变换：rotateZ(-90deg); 不透明度：0; .ball 位置：绝对; 宽度：150 像素； 高度：150 像素； 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 329.088 275.28C877.029 888.5 386.759 888.5 503.241 445C888.5 877.029 560.912 854.741 614.72C832。 453 668.528 799.785 717.419 758.602 799.785 758.602C717.419 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 717.419 758.602C90.2152 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);

`

【问题讨论】：

你需要将它包含在你的关键帧中，这就是它们的用途。

将其构建到您的关键帧中 - 只需更改 %s 以便在某个 % （取决于整个运行的时间）上没有任何变化，直到另一个 % - 然后内置您的 2s 暂停而且你不必在运行时做任何事情。

谢谢它的工作原理！另外我想知道是否可以在路径上获得动画的确切位置？ （百分比）由 JS 提供

【参考方案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>

【讨论】：

是的，好主意！谢谢。另外我想知道是否可以在路径上获得动画的确切位置？ （百分比）由 JS 提供