How to make an animation-delay before EVERY repetition?[Animation trick]

You’re probably here because you faced a little problem with making your animation wait some time before it repeats itself again. well, the animation-delay property doesn’t solve the problem because its function is to create a delay of what ever seconds you want before the first repetition of the animation occurs, then , there’s no delay.But how to solve that problem, is there an animation property that may help us ? Unfortunately no, but there’s a trick you can do to solve this problem. Let’s take a primary animation code that needs to be edited so when the animation have to wait some seconds (or what ever time you want) before it repeats itself:

The animation works, but what if I want to add a delay of 1s that it should happen after every repetition? As I said previously animation-delay won’t solve the problem so what we have to do is to make the delay as a part of the animation itself , divide the percentages by 2 in the animation and double the animation duration.

The first half of the new animation will be the old animation wich will works like previously because its new duration is its old one (4s/2 = 2s). from 50% to 75% the element will return to his old state (not moving), and to keep that state for 1s wich is the delay , we force the element to rotate with 0 deg wich is staying fixed. So, we did the delay with 1s because the movement is stoped from 75% to 100% wich is 25% of the 4s duration = 1s. So, the main idea of creating this delay is to make mathematical operation to figure out how much time does he must take and with keeping the the movement intact .