在同一个 btn 上使用 2 个 animate.css 类答案

【问题标题】：Use 2 animate.css classes on the same btn在同一个 btn 上使用 2 个 animate.css 类
【发布时间】：2013-09-02 14:17:53
【问题描述】：

我正在尝试使用 Animate.css (http://daneden.me/animate/) 制作按钮动画。

是否可以在同一个元素上有 2 个类？我想让 fadeInUpBig 发生一次，然后无限翻转。

感谢您的帮助，谢谢！

【问题讨论】：

标签： html css jquery-animate animated

【解决方案1】：

检查我的代码： http://jsfiddle.net/alexgrcs/GuvWq/4/

我下载了一个仅包含这些动画（“fadeInUpBig”和“flip”）的 animate.css 自定义版本，并在同一个 .fullAnimation 类中声明了两个关键帧。

.fullAnimation {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation: fadeInUpBig 1s, flip 1s 1s infinite;
-moz-animation: fadeInUpBig 1s, flip 1s 1s infinite;
-o-animation: fadeInUpBig 1s, flip 1s 1s infinite;
animation: fadeInUpBig 1s, flip 1s 1s infinite;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;  
}

看一下动画实例，其中一个关键帧一个接一个地被调用，给第二个关键帧增加了 1 秒的延迟。您可以在本文中找到有关此方法的更多信息：http://www.css3files.com/animation/

希望这会有所帮助！ :)

【讨论】：

有没有办法让翻转每 5 秒只发生一次？我从你给我的教程中尝试了很多东西，但从未得到它。动画延迟仅从开始延迟。非常感谢您的帮助！