animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Only CSS: Fireworks

1<div class="camera -x"><div class="camera -y"><div class="camera -z"><div class="fireworks"><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div><div class="line"><div class="spark"><div class="fire"></div></div></div></div></div></div></div>