How to build delayed loop animation with two different objects consecutively?

Question

I'm trying to build an infinite animation which will stop at the end of each loop.

Here is what I have so far, but animation-delay is only working at the beginning, it doesn't work at the end in each turn.

 span { position: absolute; } @keyframes ani-a { 0% { transform: translateY(50px); opacity: 0; } 50% { transform: translateY(0px); opacity: 1; } 75% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } .a { opacity: 1; animation: ani-a 6s infinite; animation-delay: 6s; } @keyframes ani-b { 0% { transform: translateY(50px); opacity: 1; } 50% { transform: translateY(0px); opacity: 0; } 75% { transform: translateY(50px); opacity: 1; } 100% { transform: translateY(0px); opacity: 0; } } .b { opacity: 0; animation: ani-b 6s infinite; animation-delay: 6s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="a">A</span> <span class="b">B</span> 

Answer 1

As I had mentioned in comments to an earlier post of yours (on a similar topic), the animation-delay property does not add a delay automatically between iterations (or, in other words at the end of each iteration). It works only for the first iteration. If you want to add a delay between each iteration then you should use dummy keyframes in between (along with animation-delay for your case).

In the code given in question the below is what happens:

• Total animation duration is 6s.
• Specified keyframes are 50%, 75% and 100%. That is, at 3s, 4.5s and 6s mark of the animation there is a change from one state to another for each of the two animations.

For a delay to be present at the start and end of the animation, the following changes should be done:

• Retain the animation-delay setting to introduce a 6s delay at the start of first iteration.
• Change the animation duration to 12s. 12s because your actual animation is for 6s and there is a need for a 6s delay at end of each iteration.
• Modify the keyframes to be at 25%, 37.5% and 50% because they correspond to 3s, 4.5s and 6s like in your original snippet.
• For 50% and 100% of the animation, do not change states (that is, apply the same setting). This means that for the last 50% of the animation duration (which would be 6s), the span would hold its state and thus give the illusion of a delay.

Below is a sample snippet with the above changes done.

 span { position: absolute; } @keyframes ani-a { 0% { transform: translateY(50px); opacity: 0; } 25% { transform: translateY(0px); opacity: 1; } 37.5% { transform: translateY(50px); opacity: 0; } 50% { transform: translateY(0px); opacity: 1; } 100% { transform: translateY(0px); opacity: 1; } } .a { opacity: 1; animation: ani-a 12s infinite; animation-delay: 6s; } @keyframes ani-b { 0% { transform: translateY(50px); opacity: 1; } 25% { transform: translateY(0px); opacity: 0; } 37.5% { transform: translateY(50px); opacity: 1; } 50% { transform: translateY(0px); opacity: 0; } 100% { transform: translateY(0px); opacity: 0; } } .b { opacity: 0; animation: ani-b 12s infinite; animation-delay: 6s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="a">A</span> <span class="b">B</span>