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

rendered animation

Only CSS: Codevember #7 Flying Pillows

1<div id="dream"><div class="pillows"><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="pillow_cover pillow_top"></div><div class="pillow_cover pillow_bottom"></div><div class="pillow_cover pillow_left"></div><div class="pillow_cover pillow_right"></div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div><div class="pillow"><div class="pillow_horizontal"><div class="pillow_vertical"><div class="pillow_depth"><div class="pillow_parts"><div class="sleep">ZZZ...</div></div></div></div></div></div></div></div>