如何使用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

来了解更多信息