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

rendered animation

Only CSS: Particles

csssource ↗
1<div id="ui"><div class="infinite"><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div><div class="infinite_ball"><div class="inner"></div></div></div></div>