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

rendered animation

Only CSS: Ghost Text

css6.4ssource ↗
1<div class="donuts"><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div><div class="donuts_mask"><div class="slide_x"><div class="slide_y"><div class="rotate_z">GHOST</div></div></div></div></div>