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

rendered animation

Only CSS: Game Effect "Fire!"

1<div class="camera_x"><div class="camera_y"><div class="camera_z"><div class="plate"></div><div class="forward"><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div></div><div class="backward"><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div><div class="fire"><div class="fire_piller"><div class="fire_scale"><div class="fire_part"><div class="fire_graphic"></div></div></div></div></div></div></div></div></div>