CODEWITHSUNDEEP
javascriptcss
PixelsTech
PixelsTech

Reputation: 3347

Does CSS transition perform bettern than DOM animation?

I was running something which does number scrolling using ScrollerJS. It supports two modes : CSS transition and DOM animation. When I was using the DOM animation mode, I find sometimes the scrolling is not smoother than that of CSS transition.

So I am wondering whether CSS transition performs better than DOM animation generally? Is there any proof or testing that shows this?

CSS transition : CSS3 transition/transform property which transforms an element

DOM animation : Traditional DOM animation which changing the CSS top property continuously.

Upvotes: 2

Views: 119

Answers (3)

José Papaianni
José Papaianni

Reputation: 1

This question is not easy to answer because in different cases some kind of animation performs better than the other.

I think this article could be more than interesting if we are talking (seriously) about performance between CSS and DOM animations.

If you are going to work a lot with animations and you are worry about the performance I suggest to try a more professional library like GSAP, they also have a scroll plugin.

Upvotes: 0

CupawnTae
CupawnTae

Reputation: 14580

In short, yes. Doing it in CSS allows the browser to optimize it, e.g. using hardware acceleration.

If you manipulate the DOM, the browser generally has to re-render the content, which is usually slower.

DOM manipulation is typically used to support older browsers where CSS animation is not supported (or poorly implemented).

From http://scrollerjs.pixelstech.net/#about

If CSS transition is supported in a browser, CSS transition will be the preferred option for animation.

If in old browsers where CSS transition is not supported. DOM animation will be chosen automatically.

However, note that as usual, things are never completely straightforward, and no generalization is completely true... There are javascript animation libraries out there that can rival or sometimes even outperform CSS-based transitions/animations, and they are usually more flexible. Here's some light reading:

http://davidwalsh.name/css-js-animation

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

Upvotes: 2

SidOfc
SidOfc

Reputation: 4584

This question isn't too hard to answer.

A DOM animation uses your CPU for it's calculations and since an animation is quite heavy on the CPU it'll sometimes 'lag' which is when you see artefacts on the screen.

CSS3 transitions however are able to use hardware acceleration which uses the GPU of your computer (if it has one ofc :D). Since your GPU is much stronger and better at doing things like animating, you'll barely notice any lag if any.

Upvotes: 0

Related Questions