CSS vs animations vs transit (v2)

Revision 2 of this benchmark created by Rob Adams on

Preparation HTML

<div id="moving-1"></div>
        <div id="moving-2"></div>
        <div id="moving-3"></div>
        <div id="moving-4"></div>
        <div id="moving-5"></div>
        <div id="moving-6"></div>
        <div id="moving-7"></div>
        <div id="moving-8"></div>
        <div id="moving-9"></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);

$('#moving-2').delay(600).animate({
  top: 220,
  width: 1000,
  height: 100,
  left: 300,
  opacity: 0.3
}, 600);

$('#moving-3').delay(1000).animate({
  top: 0,
  width: 800,
  height: 400,
  left: 500,
  opacity: 0.9
}, 900);

$('#moving-4').delay(200).animate({
  top: 490,
  width: 1700,
  height: 800,
  left: 100,
  opacity: 0.2
}, 1000);

$('#moving-5').delay(1300).animate({
  top: 0,
  width: 1400,
  height: 900,
  left: 100,
  opacity: 0.3
}, 1600);

$('#moving-6').delay(1900).animate({
  top: 300,
  width: 600,
  height: 600,
  left: 600,
  opacity: 0.4
}, 300);

$('#moving-7').delay(500).animate({
  top: 0,
  width: 200,
  height: 800,
  left: 800,
  opacity: 0.4
}, 1200);

$('#moving-8').delay(1000).animate({
  top: 300,
  width: 600,
  height: 1200,
  left: 400,
  opacity: 0.9
}, 1400);

$('#moving-9').delay(2300).animate({
  top: 300,
  width: 100,
  height: 300,
  left: 800,
  opacity: 0.6
}, 900);
ready
transit
$('#moving-1').transition({
  top: 0,
  width: 1200,
  height: 300,
  left: 200,
  opacity: 0.1
}, 800);

$('#moving-2').delay(600).transition({
  top: 220,
  width: 1000,
  height: 100,
  left: 300,
  opacity: 0.3
}, 600);

$('#moving-3').delay(1000).transition({
  top: 0,
  width: 800,
  height: 400,
  left: 500,
  opacity: 0.9
}, 900);

$('#moving-4').delay(200).transition({
  top: 490,
  width: 1700,
  height: 800,
  left: 100,
  opacity: 0.2
}, 1000);

$('#moving-5').delay(1300).transition({
  top: 0,
  width: 1400,
  height: 900,
  left: 100,
  opacity: 0.3
}, 1600);

$('#moving-6').delay(1900).transition({
  top: 300,
  width: 600,
  height: 600,
  left: 600,
  opacity: 0.4
}, 300);

$('#moving-7').delay(500).transition({
  top: 0,
  width: 200,
  height: 800,
  left: 800,
  opacity: 0.4
}, 1200);

$('#moving-8').delay(1000).transition({
  top: 300,
  width: 600,
  height: 1200,
  left: 400,
  opacity: 0.9
}, 1400);

$('#moving-9').delay(2300).transition({
  top: 300,
  width: 100,
  height: 300,
  left: 800,
  opacity: 0.6
}, 900);
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'
});

$('#moving-2').css({
  top: 220,
  width: 1000,
  height: 100,
  left: 300,
  opacity: 0.3,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '600ms',
  'transition-duration': '600ms',

  'WebkitTransition-delay': '600ms',
  'transition-delay': '600ms'
});

$('#moving-3').css({
  top: 0,
  width: 800,
  height: 400,
  left: 500,
  opacity: 0.9,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '900ms',
  'transition-duration': '900ms',

  'WebkitTransition-delay': '1000ms',
  'transition-delay': '1000ms'
});

$('#moving-4').css({
  top: 490,
  width: 1700,
  height: 800,
  left: 100,
  opacity: 0.2,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1000ms',
  'transition-duration': '1000ms',

  'WebkitTransition-delay': '200ms',
  'transition-delay': '200ms'
});

$('#moving-5').css({
  top: 0,
  width: 1400,
  height: 900,
  left: 100,
  opacity: 0.3,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1600ms',
  'transition-duration': '1600ms',

  'WebkitTransition-delay': '1300ms',
  'transition-delay': '1300ms'
});

$('#moving-6').css({
  top: 300,
  width: 600,
  height: 600,
  left: 600,
  opacity: 0.4,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '300ms',
  'transition-duration': '300ms',

  'WebkitTransition-delay': '1900ms',
  'transition-delay': '1900ms'
});

$('#moving-7').css({
  top: 0,
  width: 200,
  height: 800,
  left: 800,
  opacity: 0.4,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1200ms',
  'transition-duration': '1200ms',

  'WebkitTransition-delay': '500ms',
  'transition-delay': '500ms'
});

$('#moving-8').css({
  top: 300,
  width: 600,
  height: 1200,
  left: 400,
  opacity: 0.9,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1400ms',
  'transition-duration': '1400ms',

  'WebkitTransition-delay': '1000ms',
  'transition-delay': '1000ms'
});

$('#moving-9').css({
  top: 300,
  width: 100,
  height: 300,
  left: 800,
  opacity: 0.6,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '900ms',
  'transition-duration': '900ms',

  'WebkitTransition-delay': '2300ms',
  'transition-delay': '2300ms'
});
ready

Revisions

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