问题描述:

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>

网友答案:

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>
相关阅读:
Top