使CSS动画在一段时间后的特定时间内保持暂停

问题描述：

我希望小的线条从无到有，暂停，因为它在x时间内最大，然后缩小。有谁知道这可以做到吗？使CSS动画在一段时间后的特定时间内保持暂停

.words_hole_open{ 
    animation-name: hole_opening_animation; 
    width: 0px; 
    height: 30px; 
    border-radius: 45px; 
    border: solid black 1.5px; 
    margin-left: 50%; 
    animation-delay: 0.8s; 
    animation-duration: 9s; 
    visibility: hidden; 
    animation-iteration-count: 1; 
    animation-direction: alternate; 
} 

@keyframes hole_opening_animation { 
    0% { -webkit-transform: scale(0,0); visibility: visible; } 
    50% { -webkit-transform: scale(2,2); visibility: visible; } 
    100% {-webkit-transform: scale(0,0); visibility: visible; } 
}

“How？”这不是一个问题（真的是一个需求），这将会在这里得到很好的接受。请参见[问] – glennsl

并非意味着下车！猜我即将习惯堆栈溢出成为我的导师，并来拯救我 – KellysOnTop23

答

这应该可以解决你的问题：

@keyframes hole_opening_animation { 
    0% { -webkit-transform: scale(0,0); visibility: visible; } 
    25% { -webkit-transform: scale(2,2); visibility: visible; } 
    75% { -webkit-transform: scale(2,2); visibility: visible; } 
    100% {-webkit-transform: scale(0,0); visibility: visible; } 
}

因为你的动画787-9长，在25％（2.25s），它会暂停，然后它会不会再继续你的规模动画，直到75％（6.75秒）

希望有所帮助！

非常感谢！我试过这个，但不是25％和75％，我只用了50％。再次感谢！ – KellysOnTop23

使CSS动画在一段时间后的特定时间内保持暂停

相关推荐