Question

I am using animate.css and right now I have a CSS style for animated2500 which means it will take 2.5 seconds to animate. The style is:

.animated2500 {
    -webkit-animation: 2500ms ease;
    -moz-animation: 2500ms ease;
    -ms-animation: 2500ms ease;
    animation: 2500ms ease;
}

So in my HTML I would do:

<p class="animated2500 pulse">Takes 2.5 seconds to pulse</p>

There has to be an easier way to do this though, because I will want to specify how many seconds without creating a custom class for it each time.

Is there a way to use a custom data attribute like: <p data-delay="5000" class="fade">Fade in 5 econds</p> would that work?

How could I accomplish something like this?

Thanks!

Answer 1

I don’t think you can use pure CSS for this, individual styles are the way to go.

If you really want to use a data-* attribute, since you’ve tagged your question jquery, I’ll post a jQuery-specific answer although CSS animations and data attributes are not specific to jQuery (or even JavaScript):

jQuery(function($) {
    $(".pulse[data-delay]").each(function() {
        var value = parseInt(this.getAttribute("data-delay"), 10);
        if (!isNaN(value)) {
            value = value + "ms ease";
            this.style["-webkit-animation"] = value;
            this.style["-moz-animation"] = value;
            this.style["-ms-animation"] = value;
            this.style["animation"] = value;
        }
    });
});

That runs through the elements on DOM ready and applies the style directly. I don’t like it for several reasons (not least that new elements added to the page post-load won’t get handled), but if you really, really don’t want to create specific classes…