How to add 2 animations to one html tag using animate.css?

Question

I want to add 2 different types of animations to one of my HTML objects using Animate.css by Dane Den. https://github.com/daneden/animate.css

Is this possible to do?

Answer 1

Use css instead of classes to do this. If you use classes the last will overwrite the other classes.

animation-name: animation1, animation2, animation3;

For example:

If you would like to use bounce, flash and pulse, you can write your own class to do that:

HTML

<div class="animated myAnimations"></div>

CSS

.myAnimations {
    animation-name: bounce, flash, pulse;
    -webkit-animation-name: bounce, flash, pulse;



    /*
    you can set different proporties to different animations too:
    1s to bounce
    2s to flash
    3s to pulse
    */

    animation-duration: 1s, 2s, 3s;
    -webkit-animation-duration: 1s, 2s, 3s;
}

Fiddle