Results

About

At the moment there are three viable alternatives to Flash which disqualifies for mobile use and was lastly discontinued by Adobe:

Surprisingly, even after extensive search we could not find any benchmark of the animation performance of those three technologies which was complete and reproducible. Comprehensive benchmarks in the web are right now Peacekeeper, Dromaeo and Lifehacker.

The most used benchmark is Peacekeeper. It is from the developers of the 3DMark, Futuremark but lacks SVG tests. It outputs frame rates of CSS and canvas animations which are for two completely different animation types: CSS animations profiling blocks of changing color and location, canvas profiling a water ripple effect. The fact that you cannot see other results than your own and that aggregated results are only Windows-only disqualifies this otherwise nicely-done benchmark solution.

Another comprehensive one is Mozilla's Dromaeo, created by the jQuery-creator John Resig. It is still work in progress but working together with browser vendors to create a unified JavaScript performance analysis platform. Unfortunately animation performance testing is not yet implemented, like is the case with Lifehacker's solution.

Out of the need to get reliable numbers of a comparable animation for the three mentioned possibilities of web animation, we rolled our own solution. They are based on particle animation tests originally written by Adams to show off slow animation performance.

By clicking the "Run Benchmark" button it cycles through four equal particle animations written in HTML 5, CSS 3, SVG 1.2 and Flash 11. It then saves the achieved frame rates persistently to Browserscope, a web service for profiling web browsers founded by Lindsey Simon and Steve Souders, both experts on frontend performance.