how to make CSS animation to play every 10 seconds

Question

I have a css animation, which it either repeat infinite or only a certain times. but I would like to play it like 2 times every 5 seconds. Here is my code:

    #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

You can change the keyframes to show animation twice. First from 0% to 20% and next from 20% to 40%, then let it stay like that till 100%. Now change animation-duration to 5s with no animation-delay

#countText {
  animation-name: color;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

@keyframes color {
  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;
  }
}

<p id="countText">lorem text</p>