replay animation CSS3 every 3 seconds - css

Question

I made an animation css3 however need to be run every 3 seconds infinite, unable to do only with css.
CSS3
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3 alternate;
-webkit-animation: leaves 0.3s ease-in-out 3 alternate;
}
Codepen

Answer 1

You are missing animation-iteration-count. The formal syntax for animation is:
animation: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
Source + additional info
You could change it to:
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
Note the measurement of 3 requires a unit, so added an s to make it 3s. The second time measurement is the animation-delay which specifies the delay in which it will start, not between animations.
Demo
Or use the properties individually:
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
If you want a 3 second gap between the animations where the animation takes 0.3s, you'll need to make a slight adjustment. Change the animation-duration to 3s (which is the 0.3s you have)
.halo-robford-animate{
animation: leaves 3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 3s ease-in-out 3s infinite alternate;
-o-animation: leaves 3s ease-in-out 3s infinite alternate;
}
And make animation only occur for the first 0.3s:
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
5% {
opacity: 0.5;
}
10% {
opacity: 1;
}
}
Demo 2

Answer 2

Try and add this to your code
.halo-robford-animate{
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}