title: Activate css animation/translation with javascript
body: <p>I am trying to get off javascript animations and use CSS animations instead.  I am currently using jQuery's animation functionality.</p>
  
  <p>I came across <a href="http://www.dte.web.id/2011/11/berbagai-efek-transisi-pada-gambar.html#.URgp9fhky7w" rel="nofollow">this</a> website with a bunch of wonderful css animations.  Such as:</p>
  
  <pre><code>.demo1 {
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    -ms-transition:all .5s ease-out;
    -o-transition:all .5s ease-out;
    transition:all .5s ease-out;
  }
  
  .demo1:hover {
    -webkit-transform:translate(0px,10px);
    -moz-transform:translate(0px,-10px);
    -ms-transform:translate(0px,-10px);
    -o-transform:translate(0px,10px);
    transform:translate(0px,-10px);
  }
  </code></pre>
  
  <p>What I can't figure out is how to activate these animations programmatically.  So for example, instead of on a <code>hover</code>, how can I translate the element by calling <code>elem.translate()</code>?  </p>