CSS 애니메이션 순환 사이에 지연을 추가하는 방법

Question

나는 CSS 애니메이션을 사용하여 360도에서 무한 원을 <div>으로 돌리고 있습니다. 매 회전 후, 다음 회전 전에 5 초의 정지 또는 지연이 필요합니다. 어떻게 구현할 수 있습니까?

Here's a live example

코드는 다음과 같습니다.

CSS

.circle{ 
    position: absolute; 
    top: 4; 
    right: 4; 
    height: 21px; 
    width: 21px; 
    border-radius: 50%; 
    background: #00B5F9; 
    color: white; 
    font-family: varela round; 
    font-size: 11; 
    font-weight: 500; 
    border: 1px solid white; 
    -webkit-animation-name: lol; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-delay: 1s 
} 
@-webkit-keyframes lol { 
    0% { -webkit-transform:rotate(0deg) } 

    100% { -webkit-transform:rotate(360deg) } 

} 

HTML

<div class="circle">56</div> 

Answer 1

당신은 같은 것을 할 수 있습니다.

0% { -webkit-transform:rotate(0deg) } 
20% { -webkit-transform:rotate(360deg) } 
100% { -webkit-transform:rotate(360deg) } 

및 회전의 기간을 변경

-webkit-animation-duration: 6s; 

그래서 당신은 애니메이션을 설정하는 것입니다하고있는 6의를 가지고 있지만 빨리 할 회전을 이동하기 위해 (20 % 5의 대기에 대한 정확하지 않지만 당신은 그것을 해결할 수 있습니다). 따라서 회전이 발생하고 나머지 시간 동안 360deg에 위치합니다.

Demo Here