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

rendered animation

Motion Table - Symmetric Scale

1<div class="flex space-x-36">
2  <div class="block">
3    <div class="lines">
4      <div class="line top"></div>
5      <div class="line right"></div>
6      <div class="line bottom"></div>
7      <div class="line left"></div>
8    </div>
9    <div class="blocks">
10      <div class="block block-1"></div>
11      <div class="block block-2"></div>
12      <div class="block block-3"></div>
13      <div class="block block-4"></div>
14    </div>
15    <div class="text">CSS</div>
16  </div>
17  <div class="block">
18    <div class="lines">
19      <div class="line top"></div>
20      <div class="line right"></div>
21      <div class="line bottom"></div>
22      <div class="line left"></div>
23    </div>
24    <div class="blocks">
25      <div class="block block-1"></div>
26      <div class="block block-2"></div>
27      <div class="block block-3"></div>
28      <div class="block block-4"></div>
29    </div>
30    <div class="text">IS</div>
31  </div>
32  <div class="block">
33    <div class="lines">
34      <div class="line top"></div>
35      <div class="line right"></div>
36      <div class="line bottom"></div>
37      <div class="line left"></div>
38    </div>
39    <div class="blocks">
40      <div class="block block-1"></div>
41      <div class="block block-2"></div>
42      <div class="block block-3"></div>
43      <div class="block block-4"></div>
44    </div>
45    <div class="text">AWESOME</div>
46  </div>
47</div>
48