Basic Animation Full Example

Full Example:

<h1 class="animated infinite bounce">Example</h1>

You can do a whole bunch of other stuff with AnimTrap when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animtrap bounceOutLeft');

You can also detect when an animation ends:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

You can also extend jQuery to add a function that does it all for you:

 $.fn.extend({
            animtrapCSS: function (animationName, callback) {
                 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                 this.addClass('animated ' + animationName).one(animationEnd, function() {
                    $(this).removeClass('animated ' + animationName);
                    if (callback) {
                        callback();
                    }
                  });
             return this;
             }
         });

And use it like this:

    $('#yourElement').animateCss('bounce');

    or

$('#yourElement').animateCss('bounce', function () {
    // Do somthing after animation
});

You can change the duration of your animations, add a delay or change the number of times that it plays:

#yourElement {
             -vendor-animation-duration: 3s;
             -vendor-animation-delay: 2s;
             -vendor-animation-iteration-count: infinite;
         }
    

Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)