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

rendered animation

OnlyCSS: Low-poly Train

1<div class="container"><div class="monitor"><div class="camera -z"><div class="camera -y"><div class="camera -x"><div class="train-art"><div class="background-section"><div class="sky"></div><div class="sun"></div><div class="pole"></div></div><div class="floor-section"><div class="panel"></div></div><div class="back-section"><div class="screens"><div class="screen -top"></div><div class="screen -left"></div><div class="screen -right"></div><div class="screen -bottom"></div></div><div class="body"><div class="panel -top"></div><div class="panel -windowleft"></div><div class="panel -windowright"></div><div class="panel -windowbottom"></div><div class="panel -bottomleft"></div><div class="panel -bottomright"></div><div class="panel -doorleft"></div><div class="windowthickness -top"></div><div class="windowthickness -left"></div><div class="windowthickness -right"></div><div class="windowthickness -bottom"></div><div class="bodythickness -left"></div><div class="bodythickness -right"></div><div class="doorpocket -left"></div><div class="doorpocket -right"></div><div class="doorpocket -top"></div><div class="doorpocket -bottom"></div></div><div class="doors"><div class="door -left"><div class="panel -top"></div><div class="panel -bottom"></div><div class="panel -left"></div><div class="panel -right"></div><div class="panel -doorbottom"></div><div class="thickness -top"></div><div class="thickness -left"></div><div class="thickness -right"></div><div class="thickness -bottom"></div></div><div class="door -right"><div class="panel -top"></div><div class="panel -bottom"></div><div class="panel -left"></div><div class="panel -right"></div><div class="panel -doorbottom"></div><div class="thickness -top"></div><div class="thickness -left"></div><div class="thickness -right"></div><div class="thickness -bottom"></div></div></div></div><div class="ceiling-section"><div class="panel"></div></div><div class="seat-section"><div class="side -left"></div><div class="side -right"></div><div class="seat"><div class="cussion -top"></div><div class="cussion -back"></div><div class="cussion -backtop"></div><div class="cussion -front"></div><div class="cussion -bottom"></div><div class="mecha -front"></div><div class="mecha -bottom"></div><div class="shadow"></div></div></div><div class="info-section"><div class="panel -top"></div><div class="panel -front"></div><div class="panel -left"></div><div class="panel -right"></div></div><div class="shelf-section"><div class="pillar -left"></div><div class="pillar -right"></div><div class="pillar -center"></div><div class="arm -left"></div><div class="arm -right"></div><div class="arm -center"></div><div class="line -line1"></div><div class="line -line2"></div><div class="line -line3"></div><div class="line -line4"></div><div class="line -line5"></div></div><div class="strap-section"><div class="arm"></div><div class="pillar -pillar1"></div><div class="pillar -pillar2"></div><div class="pillar -pillar3"></div><div class="pillar -pillar4"></div><div class="pillar -pillar5"></div><div class="strap-parts"><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div><div class="strap"><div class="shake"><div class="joint"></div><div class="belt"></div><div class="handle"></div></div></div></div></div></div></div></div></div></div></div></div></div>