CSS animasyonunun her 10 saniyede bir oynatılması nasıl yapılır

Question

Bir css animasyonu var, ya sonsuza kadar ya da sadece belirli bir zaman. ama her 5 saniyede 2 kere oynamayı isterim.

#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

Sen ana kareler iki kez animasyon göstermek için değiştirebilirsiniz: İşte benim kodudur. Önce 0%'dan 20%'a ve 20%'dan 40%'a, daha sonra 100%'a kadar öyle kalmasını sağlayın. Şimdi hiçbir 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