使用html5数据属性的css3动画

Question

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

Answer 1

$(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/

Answer 2

If you do not want to use jQuery you can add the classes (animated fadeInUp):

<div id="foo" class="animated fadeInUp" data-animation="zoomInDown" style="width:100px; height:100px; background-color:#ddd">
</div>