title: Performance of CSS Transitions vs. JS animation packages
body: <p>I'm wondering is there any difference in performance of using CSS Transitions vs. any of the various JavaScript animation libraries? (<code>script.aculo.us</code>, <code>scripty2</code>, <code>jsAnim</code>, <code>MooTools</code>, <code>$fx</code>, etc).</p>
  
  <p>I've tried various tests in <em>Safari</em> and <em>Chrome</em> but I don't actually see any difference. I thought that CSS Transitions were supposed to be hardware accelerated.</p>
  
  <hr>
  
  <p><strong>Update</strong>:</p>
  
  <p>I've tried using Scriptaculous' <code>Effect.Fade</code> on 5 different DIVs (each containing a canvas with some lines). Doing the exact same thing using CSS transitions, I see absolutely no difference in performance. Both were very smooth with one DIV/Canvas, but both are very slow when I do more than 2 at a time.</p>
  
  <p>I've tried this in <em>Safari 4, 5 (OSX)</em>, <em>Google Chrome 5</em> and <em>FireFox 3.7pre</em>. Same results across the board.</p>
  
  <p>In answer to UpHelix's response, you're not simply limited to <code>hover</code>, etc. You can trigger a transition by changing any <code>transitionable</code> style. For instance, set the opacity of an element in JavaScript (after, you've specified the <code>transitionPropery</code> and <code>transitionDuration</code> for that element).</p>