Search code examples
htmlcssjquery-animateanimated

Use 2 animate.css classes on the same btn

I am trying to make a button animated using Animate.css (http://daneden.me/animate/).

Is it possible to have 2 classes on the same element? I would like to have fadeInUpBig happen once, then it flips infintly.

I appreciate your help, thanks!

Solution

  • Check my code: http://jsfiddle.net/alexgrcs/GuvWq/4/

    I downloaded a custom build of animate.css with just these animations ("fadeInUpBig" and "flip") and declared both keyframes in the same .fullAnimation class.

    .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;  
}

    Take a look at the animation instance, where one keyframe is called after the other, adding a 1 sec delay to the second one. You can find more info about this method in this article: http://www.css3files.com/animation/

    Hope this helps! :)