Performance: CSS Transitions vs Javascript Effects

Question

For the past 10 years I've been a fan of javascript transitions for all kinds of visual effects in the DOM. A couple of years ago I experimented a little with CSS Transitions but the lack of support and the performance issues with the browsers back then made me rule them out as a solid alternative.

I am revisiting the topic now and have been looking for resources & tests which can show the difference between the 2 methods in terms of performance and support across devices and browsers.

Question: Can anyone suggest some good late 2012/2013 resources comparing the two approaches to simple animated effects?

Mods: I am aware that similar questions exist, but with new browsers having become available, and improvements in implementations of the CSS transition spec I see this as a valid issue to re-raise since the last topics covering this were in 2010

Since you are **only** asking in terms of performance, **native** is always better — Alexander, Feb 02 '13 at 13:31

score 1 · Answer 1 · answered Feb 02 '13 at 13:20

1

You can try these resources:

and loads of more...

answered Feb 02 '13 at 13:20

Jai

74,255
12
74
103

good start, especially from the support perspective but I was hoping to find some form of solid browser/device/performance/support tables. I'll get reading on your links :-) – Alex Feb 02 '13 at 13:31

score 1 · Answer 2 · answered Feb 02 '13 at 13:23

1

You have it here: Why moving elements with translate() is better than pos:abs top/left

answered Feb 02 '13 at 13:23

Tymek

3,000
1
25
46

nice, but this is only reflective of a couple of transition types and only showing chrome on mac (desktop/laptop device) – Alex Feb 02 '13 at 13:28

score 1 · Accepted Answer · answered Jan 02 '14 at 15:33

1

Here is: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

The conclusion is if you can use css for animation then you should :P

answered Jan 02 '14 at 15:33

user3154162

26
2

1

Note that [link-only answers are discouraged](http://meta.stackoverflow.com/tags/link-only-answers/info), SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Jan 02 '14 at 15:56

Performance: CSS Transitions vs Javascript Effects

3 Answers3