Answer the question
In order to leave comments, you need to log in
How to make animation-delay on every animation cycle?
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%);}
}
Answer the question
In order to leave comments, you need to log in
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.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question