如何暂停动画CSS？

Question

我有一个动画，希望在播放中途暂停约5秒钟。当阴影达到其全长时。我知道动画延迟，但是如何在动画中途插入它或将其放置在哪里？解决方案是停止它并从停下来的地方开始一个全新的动画吗？

body {background-color: 
    grey;} 
    .sometext {color: #787878; 
    font-size: 40px; text- 
    shadow: -2px -3px 10px 
    rgba(255, 255, 255, 0.75), 
    2px 4px 12px rgba(0, 0, 0, 
    0.25);
    font-weight:bolder; text- 
    align: center;} 
  
    .sometext {animation: text. 
    color 10s linear infinite; 
    position:relative; 
    animation- 
    direction:alternate. 
    reverse;} 

    @keyframes text-color 
    {from{text-shadow: -2px -3px 
    10px rgba(255, 255, 255, 
    0.75), 2px 4px 12px rgba(0, 
    0, 0, 0.25);} to {text- 
    shadow: 10px 10px 30px 
    rgba(255, 255, 255, 0.75), 
    30px 20px 4px rgba(0, 0, 0, 
    0.25);}} 

    .white {position:relative; 
    background-color: white; 
    box-shadow: 10px 30px 30px 
    40px white; width: 20px;  
    left:-1px;top:-110px;opac
    ity:0.1}

    .white {animation: torch 10s 
    ease-in-out infinite; 
    animation-delay: 0s; 
    position:relative;animation. 
    direction: alternate. 
    reverse;} 

    @keyframes torch 
    {from{background-color: 
    grey;} to {background-color: 
    white; box-shadow: 10px 30px 
    30px 40px white; 
    opacity:0.9;}} 


    .sunray {
    height: 200px;
    width: 3px;
    background-color: white;
    opacity: 0.5;
    filter: blur(5px);
    position: relative;
    left: 110px;
    top: -120px;
    }

    .sunray {
    animation: ray 15s linear 
    infinite;
    animation-direction: 
    alternate-reverse; 
    animation-delay: 0s;
    }

    @keyframes ray {
    from {
    transform: translate(-100px, 
    -50px) rotate(-45deg);
    }
    to {
    transform: rotate(-45deg); 
    color: transparent; opacity: 
    0.1;
    }
    }

    .sunray1 {

    height: 200px;

    width: 3px;

    background-color: white;

    opacity: 0.5;

    filter: blur(5px);

    position: relative;

    left: 0px;

    top: -250px;

    }

    .sunray1 {

    animation: ray1 10s linear 
    infinite;

    animation-direction: 
    alternate-reverse; 
    animation-delay: 0s;

    }

    @keyframes ray1 {

    from {

    height: 2px;

    }
  
    to {

    height: 200px;

    }

    }

    

    <div class="sometext">4309 
    Design and Illustration 
    </div>

    <div class="white"></div> 


    <div class="sunray"></div>


    <div class="sunray1"></div>

Answer 1

使用animationPlayState。

您可以使用以下命令在CSS上进行设置：

#WRITE-HERE-THE-ID {
  animation-play-state: paused;
}

或者您可以使用JS通过以下方式进行设置：

document.getElementById('WRITE-HERE-THE-ID').style.animationPlayState='running';

例如，对于您的情况，您可以在动画中将其暂停，然后使用：hover + css或javascript方法恢复。

但是，正如您所说，也许应该是一种简单的解决方案，可以完成动画，设置为无循环并在其他条件下开始另一个循环。

参考：full documentation和example；从另一个问题的第二个答案得到它：Make a pause during infinite CSS3 animation