如何循环线性CSS3动画

时间:2017-07-14 13:45:52

标签: css3 animation css-animations

我正在尝试使用以下CSS属性设置html元素列表的动画:

animation: slide-right 10s linear infinite 0s;

动画对我来说是完美的,但是,当列表完成时,我希望有一个循环行为,而不是由于动画的无限属性而重新启动动画的生涩转换。

我试图解决它通过jQuery附加项目但它不起作用。可以使用css3进行循环动画吗?

我从这个代码中得到灵感:https://codepen.io/goomy/pen/vXKGGz

提前致谢

更新: My code here

1 个答案:

答案 0 :(得分:1)

通过"循环"我假设你的意思是你希望元素一旦从屏幕顶部消失就从屏幕底部重新出现。

实现此目的的一种方法是在overflow-y: hidden元素上设置body,然后根据视口高度单位vh定义动画关键帧。如果您将元素翻译为y = 110vh,那么(假设文档没有溢出)您知道它必须出现在屏幕外,因为body元素的最底部位于100vh。同样,您可以转到顶部的-10vh,假设元素小于10vh高。

我修改了你的CodePen来说明这个想法:

https://codepen.io/anon/pen/pwBxPL