특정 시간 동안 특정 시간이 지나면 CSS 애니메이션을 일시 중지합니다.

Question

작은 선이 아무 것도없이 자라고 싶습니다. x 시간 동안 가장 큰 부분에서 멈추고 축소합니다. 누구든지 어떻게 할 수 있는지 알고 있습니까?

.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

이 문제를 해결해야합니다 애니메이션은 25 % (2.25s)가 일시 중지 한 후이 때까지 다시 규모의 애니메이션을 계속하지 않습니다에, 긴 9S이다

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

때문에 75 % (6.75s)

희망 하시겠습니까?