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

Question

Basically I am trying to create a slideshow of text only using the bounceInLeft then bounceInRight using Dan Eden's animate.css : https://daneden.github.io/animate.css/

Instead of applying both classes to a tag, which doesn't work, I used the webkit animation to start the second animation 2 seconds later. This works but only goes through one time and I'd like to have it loop but with other words as well. I also tried adding the infinite class but it only repeats the last animation (bounceOutRight). Adding a third and fourth animation to the webkite-animation also does not seem to work.

I have very limited javascript knowledge and I'm assuming I just need to create an array of the words I want and have them loop through but I'm not sure how I would go about that. Any help would be appreciated!

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

Answer 1

This should work:

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

If you only add it on the last one, it will of course only repeat the last one.

Answer 2

找到了一个执行此http://morphist.fyianlai.com/的jquery插件