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:
For a delay to be present at the start and end of the animation, the following changes should be done:
animation-delay
setting to introduce a 6s delay at the start of first iteration.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>