매 10 초마다 CSS 애니메이션을 재생하는 방법

Question

CSS 애니메이션이 무한하거나 특정 시간에만 반복됩니다. 5 초마다 2 번씩 연주하고 싶습니다. 내 코드는 다음과 같습니다.

#countText{ 
    -webkit-animation-name: color2; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: 2; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-delay: 5s; 
} 
@-webkit-keyframes color2 { 
     0% { } 
     25% { text-shadow:-2px -5px 10px #fb0017, -5px 0px 10px #3a00cd, -5px 5px 10px #00ff3a} 
     50% { } 
     75% { text-shadow:2px 5px 10px #fb0017, 5px 0px 10px #3a00cd, 5px -5px 10px #00ff3a; } 
     100% {} 
} 

Answer 1

애니메이션을 두 번 표시하도록 키 프레임을 변경할 수 있습니다. 먼저 0%에서 20%까지 그리고 20%에서 40%까지 다음과 같이 유지하십시오. 100%. 이제 더 animation-delay

#countText { 
     -webkit-animation-name: color2; 
     -webkit-animation-duration: 5s; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-timing-function: linear; 
     -webkit-animation-delay: 0s; 
    } 
    @-webkit-keyframes color2 { 
     0% { 
     } 
     5%,25% { 
      text-shadow: -2px -5px 10px #fb0017, 
         -5px 0px 10px #3a00cd, 
         -5px 5px 10px #00ff3a; 
     } 
     15%,35% { 
      text-shadow: 2px 5px 10px #fb0017, 
         5px 0px 10px #3a00cd, 
         5px -5px 10px #00ff3a; 
     } 
     40% { 
     text-shadow: none; 
    } 
} 

Demo