CSSアニメーションを特定の時間の一定時間後に一時停止させます。

Question

小さな線を何も成長させないようにします。時間が最大になるように一時停止し、縮小します。誰でもこれがどうやってできるのか知っていますか？

.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; } 
} 

Answer 1

これはあなたの問題を解決する必要があります

@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; } 
} 

アニメーションが25％（2.25s）で、それは一時停止し、その後、それがされるまで再び規模のアニメーションを続行されません、長い9Sであるため、 75％（6.75s）