Javascript 带有Web动画API的图像滑块

我使用WAAPI创建了一个图像滑块，用于一种随唱游戏。滑块与歌曲链接，因此动画计时非常重要。使用与CSS关键帧非常相似的WAAPI关键帧，计时偏移的比例为0-1，因此在下面的代码笔中动态创建关键帧所需的计算。滑块应连续循环下一张幻灯片，包括再次从上一张幻灯片滑动到第一张幻灯片。问题在于，动画无法从slide5无缝地继续到slide0

以下是我如何动态设置关键帧：

        var keyframes = []
        var pause = 0.18
        var anim = 0.02
        var slideHeight = 150
        var translateBy = 0
        var a = {transform: 'translateY(0)'} //set initial keyframe before loop
        keyframes.push(a)
        var offsetPercent = 0 //offset var to increment by anim & pause vars.
        for(let i=0; i<songVars.fileLength; i++) {
            var b = {
                        offset: offsetPercent+= anim, 
                        transform: 'translateY('+ translateBy +'px)'
                    }
            var c = {
                        offset: offsetPercent+= pause, 
                        transform: 'translateY('+ translateBy +'px)'
                    }
            keyframes.push(b, c)
            translateBy-= slideHeight;
        }
        var d = {transform: 'translateY('+ translateBy +'px)'}; 
        keyframes.push(d)

此代码笔显示图像滑块不会从最后一个图像无缝循环回第一个图像。这是因为我找不到一种方法来实现WAAPI关键帧的连续、无缝循环。第一张幻灯片0最初是看不见的，因为CSS设置为顶部：100%；转换：translateY-100%；。我这样做是因为幻灯片应该从容器div的底部向上滑动开始

我最初让幻灯片从位置0开始，因此幻灯片0确实从底部开始，但它与时间不匹配，时间不够，而且第一张幻灯片也需要很长时间才能就位：

我还尝试了从位置-300px开始的幻灯片，因此幻灯片0在视图中，不会从底部向上滑动，但当它到达幻灯片5时，会跳到幻灯片0，如下所示：

---

我知道滑块在这里是一个常见的讨论，但在WAAPI中没有。这是一个非常新的API，但肯定能够实现循环滑块。谢谢。

对于这种效果，我认为有几种方法可以尝试。一种是为每个动画生成不同的关键帧

但是，我认为如果您使用position:absolute将所有项目放置在另一个项目之上，您可能会发现它更容易；排名：0；左：0，使用位置：相对；宽度：父元素上的300px。然后，您可以对每个项目应用相同的动画，但只需更改延迟，使它们适当交错

---

使用这种方法，翻译位置不会因幻灯片的数量而改变。您可以将所有帧定位在视口的正下方，然后分三步设置它们的动画，然后将它们返回到视口正下方的原始位置。但是，关键帧偏移将根据幻灯片的数量而改变，以便您可以在结尾处创建一个适当长的平坦部分，在重复之前等待其他幻灯片完成。

非常感谢您的精彩回答。我更喜欢你获取关键帧的技术。我不知道如何用position设置每张幻灯片的动画：尽管如此，幻灯片并没有像它们应该的那样设置动画。你能解释一下如何达到这个效果吗？当然，这个代码笔应该给你一个使用position:absolute和delay来达到这个效果的例子：非常感谢！我真的很难理解WAAPI，你给了我很多东西可以学习。非常感谢。