如何讓CSS動畫每10秒播放一次

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-duration到5s沒有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