1

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.

barrylachapelle
  • 967
  • 4
  • 13
  • 34
  • 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 Oct 18 '14 at 10:30
  • Thanks Roko! Instead of width I'll use transform. Thank you. – barrylachapelle Oct 18 '14 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 Oct 18 '14 at 14:15
  • Actually no problem Roko I found my mistake. I was starting with a 0 width ;) – barrylachapelle Oct 18 '14 at 14:34
  • possible duplicate of [what's faster? CSS3 transitions or jQuery animations?](http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations) – bummi May 20 '15 at 06:47

1 Answers1

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

LJ Wadowski
  • 6,424
  • 11
  • 43
  • 76