How to make animation-delay on every animation cycle?

Question

css

I have this animation:

.dollar_cashier_machine {
  animation-name: dollar_cashier_machine-transform-keyframes;
  animation-duration: 0.8s;

  animation-delay: 2s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}
@keyframes dollar_cashier_machine-transform-keyframes {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  8.33% {transform:translate(8px, -36.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  16.67% {transform:translate(19px, -68.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  25% {transform:translate(42px, -85.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  33.33% {transform:translate(78px, -92.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  41.67% {transform:translate(112px, -94.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  50% {transform:translate(147px, -85.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  58.33% {transform:translate(164px, -67.5px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  66.67% {transform:translate(171px, -43.5px) scale(1) rotateX(10deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  75% {transform:translate(173px, -15.5px) scale(1) rotateX(30deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  83.33% {transform:translate(174px, -1.5px) scale(1) rotateX(50deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  91.67% {transform:translate(175px, 19.5px) scale(1) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translate(176px, 41.5px) scale(1) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

this code is generated automatically. there goes the trajectory of the flying dollar.
There is one flight in this animation.
It is possible to do something like this:
1) A delay of 2 seconds
2) Repeat this animation 5 times
3) and start again, that is, a delay and a repeat. and so it's already looping
I understand that you can use js, but I want it purely on css. I understand that you can recalculate the percentages, but I fell.
If, as I think to do, it is impossible to do, then how is it easier to implement?

Answer 1

In general, I found a solution. Maybe someone needs it ...
I wrapped this block in another div. and for it I created a new animation for 5 seconds and set the transparency (opacity) for 2 seconds. And it turns out that the money flies out endlessly, but it is shown only when it is set by the second animation.