Div SlideInLeft，停止3秒，然后SlideOutRight(Div SlideInLeft, Stop for a 3 Sec, then SlideOutRight)

Div SlideInLeft，停止3秒，然后SlideOutRight(Div SlideInLeft, Stop for a 3 Sec, then SlideOutRight)

我正在学习Dan Eden精彩的animate.css中的 css过渡动画。我需要创建一个slideinleft的div，停在页面的中心几秒钟，然后是SlideOutRight。

请检查这个小提琴 。 我试图删除该类并将其替换为新类。

setTimeout(function() { $("div.slideLeft").removeClass("slideLeft").addClass("slideOutRight"); }, 1000);

谢谢

I'm learning css transition animation from Dan Eden’s wonderful animate.css I need to create a div that slideinleft, stop at the center of the page for a few seconds, then SlideOutRight.

Please check this fiddle. I tried to remove the class and replace it with the new one.

setTimeout(function() { $("div.slideLeft").removeClass("slideLeft").addClass("slideOutRight"); }, 1000);

thank you

最满意答案

您的示例中缺少的一个重要事项是animation-fill-mode CSS属性。 它指定CSS动画在执行之前和之后应如何将样式应用于其目标。

阅读有关animation-fill-mode Mozilla Developer Network的更多信息 。

看看工作小提琴 。

An important thing missing in your example is animation-fill-mode CSS property. It specifies how a CSS animation should apply styles to its target before and after it is executing.

Read more about animation-fill-mode Mozilla Developer Network.

Check out the working Fiddle.