Faire en sorte que l'animation CSS reste en pause après un certain temps pendant un certain temps

Question

Je veux que la petite ligne se développe à partir de rien, marque une pause car elle est la plus grande pendant x fois, puis se rétrécit. Est-ce que quelqu'un sait comment cela peut être fait?

.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

Cela devrait résoudre votre problème: il fera une pause et il ne va pas continuer à nouveau votre animation d'échelle

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

Parce que votre animation est longue 9s, à 25% (2.25s) jusqu'à ce que 75% (6.75s)

Espérons que ça aide!