如何使用CSS转换创建循环过渡动画 [英] How to create loop transition animation with css transform

问题描述

有人可以帮我用css变换创建循环动画过渡吗?

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

，并且在使用上一个按钮时也执行类似的操作.我很确定这是可以实现的，因为owlCarousel实现了像Im试图实现的那样的无限循环动画，您可以从这里 https://jsfiddle.net/6ofhs3jq/

非常感谢您的帮助，

谢谢

解决方案

您需要在回答您提出的问题的答案中遵循相同的原则猫头鹰轮播库

Can anybody help me create a loop animation transition with css transform.

I have created a simple slider that uses transform to move items. the problem is when I move to right and the value of translate is from translate3d(-544px, 0px, 0px) to translate3d(-272px, 0px, 0px) it will have a transition from left to right, I want the transition effect to continue moving right to left when next button is click.

and also do similar thing when the previous button is used. I'm pretty sure this is achievable as owlCarousel implemented their infinite loop animation like what Im trying to achieve, you can see it from here https://codepen.io/anon/pen/GPwwmz

Here's the fiddle I have created https://jsfiddle.net/6ofhs3jq/

Would appreciate any help,

Thanks

解决方案

You need to do the same principle in the answer I left into the question you asked jquery-javascript-loop-slider-item, is almost the same thing.

Remember you can create and infinitive loop transition with translate3d without JS heliping, you need to clone to make you carousel infinitive while user navigate between arrow directions.

1. You need to fix the images sizes (width).
2. All the images need the same width, to be able to use your translate3d to create an infinitive loop.
3. When you are reacing the last and first element of the carousel you need to clone the elements and put them into the right side to create and infinitive loop.

You can learning more by reading the code into the Owl Carousel Library

这篇关于如何使用CSS转换创建循环过渡动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！