Как сделать animation-delay при каждом цикле анимации?

Question

[Александр Петров]

У меня есть вот такая анимация:

.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%);}
}

этот код генерируется автоматически. там идет траектория летящего доллара.
В этой анимации один полет.
Возможно как-то сделать вот так:
1) Задержка в 2 секунды
2) Повтор этой анимации 5 раз
3) и начать заново, то есть задержка и повтор. и так вот уже зациклить

Понимаю, что можно js юзать, но хочу чисто на css. Понимаю, что можно проценты пересчитать, но впадлу.
Если как я думаю сделать, делать нельзя, то как проще реализовать?

Answer 1

[Александр Петров]

В общем, нашел решение. Может кому понадобится...
Я этот блок обернул в еще один div. и для него создал новую анимацию на 5 секунд и поставил прозрачность (opacity) на 2 секунды. И получается, что деньги вылетают бесконечно, но показывается только тогда, когда задал второй анимацией.