Question

我正在尝试构建一个无限动画，它将在每个循环结束时停止。

这是我到目前为止所做的，但animation-delay仅在开始时起作用，在每一回合都不起作用。

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

正如我在你之前发表的评论中提到的（关于类似主题），animation-delay属性在迭代之间不会自动添加延迟（换句话说，在每次迭代结束时）。它仅适用于第一次迭代。如果你想在每次迭代之间添加延迟，那么你应该在它们之间使用虚拟关键帧（对于你的情况，还需要animation-delay）。

在下面给出的代码中，会发生以下情况：

动画总持续时间为6秒。
指定的关键帧为50％，75％和100％。也就是说，在动画的3s，4.5s和6s标记处，两个动画中的每个动画都会从一个状态变为另一个状态。

如果在动画的开始和结束时出现延迟，则应进行以下更改：

保留animation-delay设置，在第一次迭代开始时引入6s延迟。
将动画持续时间更改为12秒。 12秒，因为你的实际动画是6s，每次迭代结束时需要6s延迟。
将关键帧修改为25％，37.5％和50％，因为它们对应于原始代码段中的3s，4.5s和6s。
对于50％和100％的动画，请勿更改状态（即应用相同的设置）。这意味着对于动画持续时间的最后50％（即6s），span将保持其状态，从而产生延迟的错觉。

以下是完成上述更改的示例代码段。

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>

如何连续构建具有两个不同对象的延迟循环动画？

1 个答案: