how to make CSS animation to play every 10 seconds - css

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 {
-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

Answer 2

.shk_this {
transform: translate3d(0, 0, 0);
animation-name: shakeMe;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes shakeMe {
2%, 18% {
transform: translate3d(-5px, 0, 0);
}
4%, 16% {
transform: translate3d(5px, 0, 0);
}
6%, 10%, 14% {
transform: translate3d(-5px, 0, 0);
}
8%, 12% {
transform: translate3d(5px, 0, 0);
}
18.1% {
transform: translate3d(0px, 0, 0);
}
}
<div class="shk_this">Shake This</div>