3 ms·

Are you sure? AFAIR, jQuery has used native (hardware-accelerated) CSS transforms since 2014.

• brundolf 6y ago
  At least in the example on this page, it performs .fadeOut() by changing the opacity via JavaScript instead of using the CSS transition property. You can verify by inspecting the DOM https://api.jquery.com/fadeOut/ https://api.jquery.com/fadeOut/ Edit: I just realized you said "transforms". Transforms are a separate question from transitions. CSS transforms are concerned with giving an element a different size, rotation, and/or position. Transitions are concerned with changing any given CSS property gradually over time (including potentially transforms). I think you're right that jQuery started using CSS transforms, but it does not appear to use CSS transitions.
  • deleted 6y ago
    [deleted]
  • jamiesonbecker 6y ago
    Fair point. Thanks for bringing it up!
  • brundolf 6y ago
    Edit: I partly misspoke. I assumed CSS transitions would be nontrivially more performant since it's a more declarative API and the math would be done natively by the browser, but according to MDN the performance difference is negligible in most (though not all) cases if you're using requestAnimationFrame in the JavaScript version: https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance#performance_comparison_transitions_vs._requestanimationframe https://developer.mozilla.org/en-US/docs/Web/Performance/CSS... The main case where CSS transitions are meaningfully faster appears to actually be transforms themselves, because for those the actual transition, too, can be moved to the GPU, whereas a JavaScript-driven transition still has to be run on the main CPU thread.
• asiando 6y ago
  Assuming you meant "CSS Transitions": No, jQuery uses requestAnimationFrame. * "CSS transforms" are unrelated to animations.