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

rendered animation

Build-a-Burger

css3.75ssource ↗
1<div class="container-fluid h-100">
2	<div class="row justify-content-center align-content-stretch h-100">
3		<div class="col d-none d-sm-flex"></div>
4		<div class="col d-none d-sm-flex"></div>
5		<div class="col"></div>
6		<div class="col-auto d-flex align-items-center">
7			<div class="burger m-sm-5">
8				<div class="taylor-design bounceInDown"></div>
9				<div class="sesame-seed bounceInDown"></div>
10				<div class="sesame-seed bounceInDown"></div>
11				<div class="sesame-seed bounceInDown"></div>
12				<div class="sesame-seed bounceInDown"></div>
13				<div class="sesame-seed bounceInDown"></div>
14				<div class="sesame-seed bounceInDown"></div>
15				<div class="bun top bounceInDown">
16					<div class="shadow"></div>
17					<div class="shadow"></div>
18				</div>
19				<div class="lettuce bounceInDown"></div>
20				<div class="tomatoes bounceInDown"></div>
21				<div class="lunch has-accent-1-color bounceInDown">Lunch</div>
22				<div class="and has-accent-2-background-color has-accent-1-color bounceInDown">and</div>
23				<div class="learn has-primary-color bounceInDown">Learn</div>
24				<div class="cheese bounceInDown"></div>
25				<div class="bun bottom bounceInDown">
26					<div class="shadow"></div>
27					<div class="shadow"></div>
28				</div>
29			</div>
30		</div>
31		<div class="col"></div>
32		<div class="col d-none d-sm-flex"></div>
33		<div class="col d-none d-sm-flex"></div>
34	</div>
35</div>