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

rendered animation

Only CSS: Flex Breeze

1<div class="title">BREEZE</div><div class="wavy"><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div></div>