title: css3 animation using html5 data attribute
body: <p>I am trying to use one of the css animation framework called <a href="https://daneden.me/animate/" rel="nofollow">Animate.css</a> in a way that I can effectively manage multiple animations.</p>
  
  <p>I have a markup like the following for example. </p>
  
  <pre><code>&lt;div data-animation="fadeInUp" style="width:100px; height:100px; background-color:#ddd"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And jquery as follows</p>
  
  <pre><code>$(function () {
      $('div').addClass('animated ' + data('animation'));
  });
  </code></pre>
  
  <p>So when document is loaded the div should start executing <code>fadeInUp</code> animation from the css framework referenced.</p>
  
  <p>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.</p>
  
  <p>I must have got something wrong, it doesn't do anything.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/sungsoonz/9aE2N/4/" rel="nofollow">JS Fiddle</a></p>