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

rendered animation

Only CSS: Flex Breeze 3D Twist

1<div class="title">BREEZE</div><div class="wavy"><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div><div class="waveline"><div class="bar -top"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -middle"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div><div class="bar -bottom"><div class="wall -front"></div><div class="wall -back"></div><div class="wall -top"></div><div class="wall -bottom"></div><div class="wall -left"></div><div class="wall -right"></div></div></div></div>