有没有办法使用 animate.css 循环组合动画？我正在尝试用文字弹跳/滑动并让它们弹跳答案

【问题标题】：Is there a way to loop combined animations using animate.css? I am trying to bounce/slide in words and have them bounce out有没有办法使用 animate.css 循环组合动画？我正在尝试用文字弹跳/滑动并让它们弹跳
【发布时间】：2015-05-20 11:10:05
【问题描述】：

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

我没有将这两个类都应用到一个标签上，这不起作用，我使用 webkit 动画在 2 秒后开始第二个动画。这有效，但只经历一次，我想让它循环，但也可以用其他词。我也尝试添加无限类，但它只重复最后一个动画（bounceOutRight）。向 webkite-animation 添加第三和第四个动画似乎也不起作用。

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

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

【问题讨论】：

可能是因为你将第二个动画的延迟设置为零秒...所以它无法完成...因为他无法启动！

标签： jquery html css animation css-animations

【解决方案1】：

这应该可行：

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

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

【讨论】：

该死，我希望它这么简单，但它对我不起作用。它重复了bounceInLeft 两次，然后一遍又一遍地重复第二个动画。
我认为它在你的延迟和无限之间发生了冲突。尝试查看@keyframe，看看你是否可以通过它无限地展示你的动画。

【解决方案2】：

找到了一个 jquery 插件来做这个 http://morphist.fyianlai.com/

【讨论】：