有没有办法使用 animate.css 循环组合动画？我正在尝试 bounce/slide 并让他们跳出来

Question

基本上，我尝试使用 Dan Eden 的 animate.css 仅使用 bounceInLeft 然后 bounceInRight 创建文本幻灯片：https://daneden.github.io/animate.css/

我没有将两个 class 都应用到一个标签，这不起作用，我使用 webkit 动画在 2 秒后开始第二个动画。这行得通，但只经过一次，我想让它循环，但也用其他词。我也尝试添加无限 class 但它只重复最后一个动画 (bounceOutRight)。添加第三个和第四个动画到 webkite-animation 似乎也不起作用。

我的 javascript 知识非常有限，我假设我只需要创建一个我想要的单词数组并让它们循环，但我不确定我将如何去做。如有任何帮助，我们将不胜感激！

.bounceInLeft {
-webkit-animation: bounceInLeft 1s, bounceOutRight 2s;
-webkit-animation-delay: 0s, 1.5s;
}

Answer 1

这应该有效：

.bounceInLeft {
-webkit-animation: bounceInLeft 1s infinite, bounceOutRight 2s infinite;
-webkit-animation-delay: 0s, 1.5s;
}

如果只加在最后一个，当然只会重复最后一个

Answer 2

找到一个 jquery 插件可以做到这一点 http://morphist.fyianlai.com/

有没有办法使用 animate.css 循环组合动画？我正在尝试 bounce/slide 并让他们跳出来

Is there a way to loop combined animations using animate.css? I am trying to bounce/slide in words and have them bounce out

html

css

jquery

animation

css-animations