Javascript 使用html5数据属性的css3动画

我正在尝试使用css动画框架中的一个，该框架的调用方式可以有效地管理多个动画

例如，我有一个如下所示的标记

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

因此，当加载文档时，div应该从引用的css框架开始执行

fadeInUp

动画

在真实的环境中，我将使用jquery滚动插件来检测x，y位置，以确定何时启动动画，但这只是开始

我一定是弄错了什么，它什么也没用

这是我的

---

例如，请参见您的小提琴更新：

如果您不想使用jQuery，可以添加类（动画fadeInUp）：

$(function () {
    $('div').addClass('animated ' + data('animation'));
});

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

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