Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect redraw rate (fps) of a css animation?

I'm interested in the fluency of my CSS animations. As some extra points:

  • I'm mostly interested in performance on mobile devices (WebKit),
  • It would help if data could be gathered during normal operation (with real users doing real things).
like image 519
vbence Avatar asked Nov 23 '11 14:11

vbence


People also ask

How many fps are animations?

You can also alter the FPS (frames per second). By default, FPS 24 is the standard in animation production, but FPS 12 can be a pretty good start for hand-drawn animation.

Does CSS animation affect performance?

The fact is that, in most cases, the performance of CSS-based animations is almost the same as JavaScripted animations — in Firefox at least. Some JavaScript-based animation libraries, like GSAP and Velocity. JS, even claim that they are able to achieve better performance than native CSS transitions/animations.

Is CSS always faster than JavaScript?

CSS has fairly good performance as it offloads animation logic onto the browser itself. This lets the browser optimize DOM interaction and memory consumption and most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS.


2 Answers

Chrome Beta for Android supports getting FPS by setting flag in chrome://flags

like image 166
GroovyDotCom Avatar answered Sep 23 '22 00:09

GroovyDotCom


Negative answer: window.getComputedStyle will not yield any result because the JS program itself (so the number of mesurements) will slow down on high animation load.

See: http://jsfiddle.net/9xQ5H/17/

like image 35
vbence Avatar answered Sep 24 '22 00:09

vbence