Unfortunately, there isn't a direct property to set the delay between iterations for infinite keyframe animations. The animation-delay only controls the initial delay before the animation starts.
However,
You can introduce a pause between iterations by adjusting the keyframe animation itself to include the desired "static" time within it.
For instance, consider this example where a div remains still for 2 seconds and then rotates back and forth by 90° within 1 second during each iteration of the infinite animation, separated by a 2-second pause.
div {
width: 200px; height: 200px;
background: red;
-webkit-animation: flu 3s infinite;
animation: flu 3s infinite;
}
@keyframes flu {
66%, 100% { transform: rotate(0deg); }
83% { transform: rotate(90deg); }
}
@-webkit-keyframes flu {
66%, 100% { transform: rotate(0deg); }
83% { transform: rotate(90deg); }
}
<div></div>
Keep in mind that you'll need to adjust the percentage values in the keyframe animation to suit your requirements (animation duration and pause) along with the total animation duration.
Here's the same example but with a 1-second animation duration and a 1-second pause between iterations:
div {
width: 200px; height: 200px;
background: red;
-webkit-animation: flu 2s infinite; /* <-- changed to 2s (1 second animation and 1 second pause) */
animation: flu 2s infinite; /* <-- changed to 2s (1 second animation and 1 second pause) */
}
@keyframes flu {
50%, 100% { transform: rotate(0deg); } /* changed 66% to 50% */
75% { transform: rotate(90deg); } /* changed 83% to 75% */
}
@-webkit-keyframes flu {
50%, 100% { transform: rotate(0deg); } /* changed 66% to 50% */
75% { transform: rotate(90deg); } /* changed 83% to 75% */
}
<div></div>