如何使用CSS转换创建循环过渡动画

Question

谁能帮我用CSS转换创建循环动画过渡。

我创建了一个简单的滑块，该滑块使用transform来移动项目。 问题是当我向右移动并且translate的值是从translate3d(-544px, 0px, 0px)到translate3d(-272px, 0px, 0px) ，它将有一个从左到右的过渡，我希望过渡效果为单击下一个按钮时，继续从右向左移动。

并且在使用上一个按钮时也做类似的事情。 我很确定这是可以实现的，因为owlCarousel实现了像Im试图实现的那样的无限循环动画，您可以在这里查看https://codepen.io/anon/pen/GPwwmz

这是我创建的小提琴https://jsfiddle.net/6ofhs3jq/

不胜感激，

谢谢

Answer 1

您需要在回答jquery-javascript-loop-slider-item的问题中回答相同的原则，这几乎是同一回事。

请记住，您可以在不使用JS转换的情况下使用translate3d创建无限循环转换，您需要克隆以使旋转木马不固定，同时用户在箭头方向之间导航。

1. 您需要固定图像尺寸（宽度）。
2. 所有图像都需要相同的宽度，以便能够使用您的translation3d创建无限循环。
3. 接收轮播的最后一个元素时，您需要克隆这些元素并将其放到右侧以创建无限循环。

您可以通过阅读Owl Carousel Library中的代码来了解更多信息