我正在使用 css3 关键帧制作滑块。我不希望我的最后一张幻灯片直接跳到第一张幻灯片。我发现了一些与之相关的问题，并发现复制第一个图像技巧会起作用。
第一次工作正常，但第二次第一张幻灯片与正常时间相比需要两倍的时间，这很明显，因为最后一张幻灯片和第一张幻灯片是相同的。
那么有没有办法解决这个问题呢？
我也找到了这个答案，在这最后一个解决方案太接近了，无法回答这个问题，但问题是当它开始时，它来自transform:translateX(100%)我不想要的正确即。我希望我的图像从transform:translateX(0).
那么有没有办法制作滑块，除了重复第一张图像，它看起来像使用具有相同滑动时间的 css3 关键帧的无限循环
堆栈片段
.inner {
width: 200px;
height: 200px;
overflow: hidden;
}
.images-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-animation: slideToLeft 10s ease infinite;
animation: slideToLeft 10s ease infinite;
}
@keyframes slideToLeft {
0%,
20% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
25%,
45% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
50%,
70% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
75%,
100% { …