css3 translate vs jquery animate (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="//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({
  '-webkit-transition': 'transform 1s',
  '-webkit-transform': 'translate(687px, 443px)'
}).on('transitionend', function() {
  deferred.resolve();
});
ready
translate3d
// async test
$('#card').css({
  '-webkit-transition': 'transform 1s',
  '-webkit-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.