Animation FPS Test

What Is an Animation FPS Test?

This tool runs two real animations simultaneously - one driven by JavaScript through requestAnimationFrame, and one driven purely by CSS @keyframes - and measures the JavaScript one's genuine frame rate and dropped-frame count live. Running both side by side also lets you visually compare their smoothness, since CSS animations are often handled directly by your GPU's compositor and can remain smooth even when JavaScript-driven work is competing for the main thread.

How to Use the Animation FPS Test

1. Click "Start Test."
2. Watch both boxes move back and forth for 5 seconds.
3. Check the measured JS Animation FPS and Dropped Frames count once the test completes.
4. Visually compare whether the CSS-driven box (orange) appeared smoother than the JS-driven box (green) during the test - particularly noticeable if your system was under any load.

How It Works

The JavaScript animation updates its position on every requestAnimationFrame callback, which the browser calls right before each actual screen repaint - this tool counts those real callbacks over a precise 5-second window to calculate genuine frames per second. It also measures the real time gap between consecutive frames; a gap noticeably longer than a standard 60Hz frame interval indicates the browser genuinely skipped rendering a frame, counted here as a dropped frame. The CSS animation, meanwhile, runs through the browser's own animation engine, which can often be handled more efficiently by the GPU compositor without needing JavaScript to run on every single frame.

Understanding Your Results

• JS Animation FPS close to your monitor's refresh rate, few dropped frames - your browser is rendering JavaScript-driven animation smoothly and efficiently.
• Noticeably lower FPS or many dropped frames - can indicate heavy CPU load from other tabs or applications, an underpowered device for the current workload, or background browser processes competing for rendering time.
• CSS box looks visually smoother than the JS box - a real and expected difference in many cases; CSS animations can sometimes be composited directly by the GPU with less main-thread involvement than JavaScript-driven position updates.
• Estimated display refresh shows an unusual number - this is a rough estimate rounded to common refresh rates (60, 90, 120, 144Hz etc.) based on your measured FPS under ideal conditions, not a certified reading of your monitor's exact specification.

Browser Limitations

This test measures animation performance within your current browser tab specifically - background tabs, other running applications, and general system load all genuinely affect the results, which is actually useful information about real-world performance rather than a limitation to work around. The refresh rate estimate is a rough approximation based on measured FPS under good conditions; for a more focused refresh rate reading, use the dedicated Refresh Rate Test.

Common Mistakes to Avoid

• Running the test with many other tabs or heavy applications open - for a baseline reading of your system's animation capability, close unnecessary background processes first; for a real-world stress test, leave them running intentionally.
• Judging smoothness by the numbers alone without watching the boxes - the visual comparison between the JS and CSS boxes often reveals smoothness differences the raw FPS number alone doesn't fully capture.
• Expecting identical FPS between the JS and CSS animations - some difference is normal and expected, since they're rendered through different browser pipelines.

Frequently Asked Questions

Conclusion

Seeing real JavaScript and CSS animation performance side by side gives you a genuine, practical sense of how your device handles animated content under current conditions. For raw rendering throughput specifically, pair this with the Canvas Performance Test.