CSS vs animations vs transit (v6)

Revision 6 of this benchmark created by Rob Adams on

Preparation HTML

<div id="moving-1" style="top:0;left:0;opacity:0;width:0;height:0;"></div>
        
        

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
animate
$('#moving-1').animate({
  top: 0,
  width: 1200,
  height: 300,
  left: 200,
  opacity: 0.1
}, 800);
ready
transit
$('#moving-1').transition({
  top: 0,
  width: 1200,
  height: 300,
  left: 200,
  opacity: 0.1
}, 800);
ready
css
$('#moving-1').css({
  top: 0,
  width: 1200,
  height: 300,
  left: 200,
  opacity: 0.1,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '800ms',
  'transition-duration': '800ms'
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.