Speed up javascript animation by specifying the point of time when css rules should apply

Question

Suppose I have 10 elements on a page.

At the current moment I'm iterating them in a loop changing width and position:

el[i].style.width = ....
el[i].style.left = ....

I'm wondering if the animation could run faster if I tell the browser to re-render all elements only once, after the loop has finished

Predefined CSS3 styles is not an option, since I'm writing a game with moving elements — Dan
– Dan, Commented Feb 5, 2013 at 7:45
You could use transitions... transition:all 1s linear; So when you change any property on the element, it will be transitioned to its new value. If need be, you could specify separate transitions for each property that you care about: transition:width 1s linear, left .5s ease-in-out; etc — Shmiddty
– Shmiddty, Commented Feb 5, 2013 at 16:48
I want the page to be re-rendered after I have applied 20 CSS rules. By now page is re-rendered 20 times, sadly — Dan
– Dan, Commented Apr 5, 2013 at 8:41

Bertrand · Accepted Answer · 2013-02-04 19:27:29Z

1

Using CSS3 is faster and you will have to code a lot less, have a look at this Jsbin, I just did two examples, one with transition (.anima2) and the other with animation (.anima). With JS you just have to apply and remove the classes.

answered Feb 4, 2013 at 19:27

Bertrand

13.6k5 gold badges41 silver badges48 bronze badges

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

Comments

TheZuck · Accepted Answer · 2013-02-04 19:08:47Z

1

If you apply the change to a shared class or load a style sheet with all changes in it this will make all changes apply at the same time, not sure about performance impact though...

answered Feb 4, 2013 at 19:08

TheZuck

3,6512 gold badges31 silver badges39 bronze badges

1 Comment

Dan Over a year ago

I am calculating CSS rules using some formula, no chances to predict the numbers )

Dan · Accepted Answer · 2013-04-05 08:38:23Z

0

To be investigated by me (not fully cross browser, behaviour differs and changes, this needs heavy work of testing abd benchmarking):

a) requestAnimationFrame

b) CSS translate3d and other new CSS3 instead of left for GPU optimization

Come back later and I'll tell the results

answered Apr 5, 2013 at 8:38

Dan

58.2k44 gold badges125 silver badges162 bronze badges

Collectives™ on Stack Overflow

Speed up javascript animation by specifying the point of time when css rules should apply

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related