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

rendered animation

Only CSS: Codevember #2 Cake

1<div id="table"><div class="camera"><div class="copy">I love sweets! :D</div><div class="dishes"><div class="dish"></div><div class="dish"></div><div class="dish"></div><div class="dish"></div><div class="dish"></div><div class="dish"></div><div class="dish"></div><div class="dish"></div><div class="dish"></div><div class="dish"></div></div><div class="cakes"><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div><div class="cake"><div class="cake_tower"><div class="cake_1"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_2"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="cake_3"><div class="wall_1"></div><div class="wall_2"></div><div class="wall_3"></div><div class="wall_4"></div><div class="fork"></div></div></div></div></div></div></div></div></div>