CSS animation delay between iterations

Question

I have this kind of animation:

.wiggle-animation {
  animation: 1s wiggle-animation ease infinite;
  animation-delay: 10s;
}

@keyframes wiggle-animation {
  0% {
    transform: rotate(-3deg);
    box-shadow: 0 2px 2px #000;
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0);
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }
}

I want this animation to trigger every 10 seconds. I have tried animation-delay but it does not work. Can you tell me what am I doing wrong?

Answer 1

There is no construct in CSS that handles this, you sort of have to fake it. Remove the delay, set your animation's duration to 11s, then adjust your keyframe percentages so that nothing happens for the final 90.9% of your animation, dividing up your remaining 9.1% of the time for the steps of your animation. (The animation-delay property only sets an initial delay.)

source for this technique

Answer 2

animation-delay delays the start of the animation.

Your best bet is to 'do the math' and set the total duration of your animation to 10 seconds, and have the animation remain still for the remaining 9 seconds:

.wiggle-animation {
  animation: 10s wiggle-animation ease infinite;
}

@keyframes wiggle-animation {
  0% {
    transform: rotate(-3deg);
    box-shadow: 0 2px 2px #000;
  }
  2% {
    transform: rotate(20deg);
  }
  4% {
    transform: rotate(-15deg);
  }
  6% {
    transform: rotate(5deg);
  }
  9% {
    transform: rotate(-1deg);
  }
  10% {
    transform: rotate(0);
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }
  100% {
    transform: rotate(0);
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }
}