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

rendered animation

Only CSS: Satellite

1<div class="container"><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="monitor"><div class="camera -z"><div class="camera -y"><div class="camera -x"><div class="ball"><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div><div class="line"><div class="rotate"><div class="panel"><div class="graphic"></div></div></div></div></div></div></div></div></div></div>