css3 animation using html5 data attribute

css, html, javascript, jquery

Solution

$(function () {
    var $divToAnimate = $("div"); // This will animate all the div elements in doc
    $divToAnimate.addClass('animated ' + $divToAnimate.data('animation'));
});

See for instance your Fiddle updated: http://jsfiddle.net/9aE2N/5/

Problem

I am trying to use one of the css animation framework called Animate.css in a way that I can effectively manage multiple animations. I have a markup like the following for example. ``` <div data-animation="fadeInUp" style="width:100px; height:100px; background-color:#ddd"></div> ``` And jquery as follows ``` $(function () { $('div').addClass('animated ' + data('animation')); }); ``` So when document is loaded the div should start executing `fadeInUp` animation from the css framework referenced. In a real context, I would be using jquery scroll plugin to detect the x, y position to find when to fire animation but this is to just get started. I must have got something wrong, it doesn't do anything. Here is my JS Fiddle

Original source