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>