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

时间:2013-08-30 00:14:51

标签: html css jquery-animate animated

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

是否可以在同一元素上有2个类?我想让fadeInUpBig发生一次,然后它无意中翻转。

感谢您的帮助,谢谢!

1 个答案:

答案 0 :(得分: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/

希望这有帮助! :)