Jquery / CSS animation performance

Question

I have a question around jquery creating css animations.

I just finished a jquery plugin that draws and animates dom elements with css. I am using jquery only to change and create css variables. I just tested my code on my phone and it seems to get very choppy. From what I have been reading CSS 3 animations are hardware accelerated while jquery are not.

So... are runtime css attributes created by jquery hardware accelerated?

For example, applying a css attribute to blades that use transition-duration 0.3s

$(blades).css({'width':'5px'}); to animate

See my code at http://andehlu.github.io/sensuJS/

Thank you.

Use translate3d(x, y, z) for better accelerated performances. Than, if triggered by jQuery or JS or CSS3#animation makes no difference, they'll translate beautifully. — Roko C. Buljan
– Roko C. Buljan, Commented Oct 18, 2014 at 10:30
Thanks Roko! Instead of width I'll use transform. Thank you. — barrylachapelle
– barrylachapelle, Commented Oct 18, 2014 at 12:38
@RokoC.Buljan I noticed the behaviour of transform:scaleX is different from jquerys width(). It scales the element plus everything inside it like background images. I was hoping only to increase the amount of width in pixels. is there a way to emulate width() with transform:scale? — barrylachapelle
– barrylachapelle, Commented Oct 18, 2014 at 14:15
Actually no problem Roko I found my mistake. I was starting with a 0 width ;) — barrylachapelle
– barrylachapelle, Commented Oct 18, 2014 at 14:34
possible duplicate of what's faster? CSS3 transitions or jQuery animations? — bummi
– bummi, Commented May 20, 2015 at 6:47

LJ Wadowski · Accepted Answer · 2014-10-18 11:07:01Z

1

Those types of transitions/animations which are not affecting DOM elements structure (eg. CSS trasnform's or opacity) are recommended to increase animation speed (instead of changing eg width or top what will affect other DOM elements) and yes CSS animations are faster than JS.

More information you can find HERE and

HERE

edited Oct 18, 2014 at 11:07

answered Oct 18, 2014 at 10:57

LJ Wadowski

6,79011 gold badges49 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery / CSS animation performance

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related