css3 translate vs jquery animate

Benchmark created by Benny Neugebauer on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div id="stage" style="width: 800px; height: 600px; background-color: red;">
  <div id="card" style="width: 113px; height: 157px; position: absolute; background-color: blue;">
  </div>
</div>

Setup

var allElements = document.getElementsByTagName('*');
  
  for (var i = 0; i < allElements.length; i++) {
    var element = allElements[i];
    element.style.border = '0px';
    element.style.margin = '0px';
    element.style.padding = '0px';
  
    var element = document.getElementById('card');
    element.style.transform = 'none';
    element.style.left = '0px';
    element.style.top = '0px';
  }

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.animate
// async test
$('#card').animate({
  'left': '687px',
  'top': '443px'
}, 1000, function() {
  deferred.resolve();
});
ready
translate
// async test
$('#card').css({
  'transition': 'transform 1s',
  'transform': 'translate(687px, 443px)'
}).on('transitionend', function() {
  deferred.resolve();
});
ready
translate3d
// async test
$('#card').css({
  'transition': 'transform 1s',
  'transform': 'translate3d(687px, 443px, 0px)'
}).on('transitionend', function() {
  deferred.resolve();
});
ready

Revisions

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