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

rendered animation

Tick tock

1<div class="window cut">
2  <div class="container">
3    <div class="tick"><div class="letter">I</div></div>
4    <div class="tick"><div class="letter">O</div></div>
5    <div class="tick"><div class="letter">I</div></div>
6    <div class="tick"><div class="letter">O</div></div>
7    <div class="tick"><div class="letter">I</div></div>
8    <div class="tick"><div class="letter">O</div></div>
9    <div class="tick"><div class="letter">I</div></div>
10    <div class="tick"><div class="letter">O</div></div>
11    <div class="tick"><div class="letter">I</div></div>
12    <div class="tick"><div class="letter">O</div></div>
13    <div class="tick"><div class="letter">I</div></div>
14    <div class="tick"><div class="letter">O</div></div>
15  </div>
16</div>
17<div class="window cut-black">
18  <div class="container">
19    <div class="tick"><div class="letter">I</div></div>
20    <div class="tick"><div class="letter">O</div></div>
21    <div class="tick"><div class="letter">I</div></div>
22    <div class="tick"><div class="letter">O</div></div>
23    <div class="tick"><div class="letter">I</div></div>
24    <div class="tick"><div class="letter">O</div></div>
25    <div class="tick"><div class="letter">I</div></div>
26    <div class="tick"><div class="letter">O</div></div>
27    <div class="tick"><div class="letter">I</div></div>
28    <div class="tick"><div class="letter">O</div></div>
29    <div class="tick"><div class="letter">I</div></div>
30    <div class="tick"><div class="letter">O</div></div>
31  </div>
32</div>
33<div class="outside-letter t">T</div>
34<div class="outside-letter c">C</div>
35<div class="outside-letter k">K</div>