CSS/SVG动画效果-三个反弹方块-正确计时

我基本上是想重现这些跳跃圈的计时：

所有三个圆圈都以相同的速度跳跃，但第一个圆圈直到第三个圆圈落地后才开始。就我的一生而言，我不能正确地延迟每一个周期来获得正确的时机。当第一个圆圈跳到一半的时候，我可以跳到第二个圆圈的位置，但是我不能跳到第三个圆圈落地后第一个圆圈开始的位置。也许我的宽松政策需要调整，也需要调整时机

资料来源：

@关键帧跳跃{
0% {
变换：translateY（0px）；
}
33% {
转换：translateY（-12px）；
}
100% {
变换：translateY（0px）；
}
}
.square-1{
动画：无限跳跃；
}
.square-2{
动画：跳跃2秒。6秒轻松无限；
}
.square-3{
动画：跳跃2s 1.2s轻松无限；
}

---

假设您同时只想要一个“空中”的圆

然后，应用过渡的关键帧必须仅覆盖33%

这使得：

@关键帧跳跃{
0% {
变换：translateY（0px）；
}
16.5% {
转换：translateY（-12px）；
}
33%, 100% {
变换：translateY（0px）；
}
}
.square-1{
动画：无限跳跃；
}
.square-2{
动画：跳跃2秒。6秒轻松无限；
}
.square-3{
动画：跳跃2s 1.2s轻松无限；
}

---

我认为您试图通过延迟来控制迭代。动画延迟不是那样工作的。