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

rendered animation

Only CSS: Screw Mosaic Static

1<div class="donuts"><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">SCREW</div></div></div></div></div>