compare set css transform (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.5.3/jquery.velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
<div class="test-element" style="width: 100px; height: 100px; background-color:red;"></div>

Setup

var $element = $('.test-element');

Test runner

Ready to run.

Testing in
TestOps/sec
DOM 3d
var el = $element[0];
var transform = 'translate3d(100px,0,0)';
if (el.style.webkitTransform) el.style.webkitTransform = transform;
else if (el.style.MozTransform) el.style.MozTransform = transform;
else if (el.style.msTransform) el.style.msTransform = transform;
else if (el.style.OTransform) el.style.OTransform = transform;
else el.style.transform = transform;
ready
jQuery
$element.css('transform', 'translateX(100px)');
ready
Velocity
$element.velocity({
  translateX: '100px'
}, {
  duration: 0
});
ready
DOM 2d
var el = $element[0];
var transform = 'translateX(100px)';
if (el.style.webkitTransform) el.style.webkitTransform = transform;
else if (el.style.MozTransform) el.style.MozTransform = transform;
else if (el.style.msTransform) el.style.msTransform = transform;
else if (el.style.OTransform) el.style.OTransform = transform;
else el.style.transform = transform;
ready

Revisions

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