I'm interested in the fluency of my CSS animations. As some extra points:
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.
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.
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.
Chrome Beta for Android supports getting FPS by setting flag in chrome://flags
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With