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

rendered animation

Only CSS: Rainbow Prism

1<div id="ui"><div class="rotate"><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div><div class="rotate_ball"><div class="inner"></div></div></div><div class="cell_list"><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div><div class="cell_list_item"></div></div></div>