With pure CSS3 animations, one way to add a delay between each separate iteration of the animation would be to change the keyframe settings so that they provide the required delay.
The following snippet does the following:
- The animation lasts 6 seconds. In order to have a delay, the entire duration should be the duration for which your animation actually performs + time delay. Here, the animation actually runs for 3 seconds, we need a delay of 3 s, so the duration is set to 6 seconds.
- For the first 50% of the animation (i.e. 3 seconds), nothing happens, and the element basically retains its position. This makes it possible to apply a 3 second delay.
- For the next 25% of the animation (i.e. 1.5 seconds), the element is moved 50 pixels with
transform: translateY(50px) . - For the last 25% of the animation (i.e., the last 1.5 seconds), the element is moved upward by 50 pixels with
transform: translate(0px) (back to its original position). - The entire animation is repeated infinitely many times, and each iteration ends with a 3-second delay.
div{ height: 100px; width: 100px; border: 1px solid; animation: move 6s infinite forwards; } @keyframes move{ 0% { transform: translateY(0px);} 50% { transform: translateY(0px);} 75% { transform: translateY(50px);} 100% { transform: translateY(0px);} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div>Some content</div>
The animation-delay property introduces a delay only for the first iteration and, therefore, cannot be used to add delays between each iteration. The following is an example fragment illustrating this.
div{ height: 100px; width: 100px; border: 1px solid; animation: move 6s infinite forwards; animation-delay: 3s; } @keyframes move{ 0% { transform: translateY(0px);} 50% { transform: translateY(50px);} 100% { transform: translateY(0px);} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div>Some content</div>
Harry source share