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

ground truth

Wave Text Animation(Real PURE CSS)

css2.5ssource ↗

model outputs

1<html lang="en">
2
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="stylesheet" href="style.css">
8  <title>Wave Text animation</title>
9</head>
10
11<body>
12
13  <div class="container">
14    <div class="loader">
15      <span style="--i:1">L</span>
16      <span style="--i:2">A</span>
17      <span style="--i:3">O</span>
18      <span style="--i:4">L</span>
19      <span style="--i:5">A</span>
20      <span style="--i:6">_</span>
21      <span style="--i:7">W</span>
22      <span style="--i:8">3</span>
23      <span style="--i:9">3</span>
24      <span style="--i:10">L</span>
25      <span style="--i:11">L</span>
26      <span style="--i:12">3</span>
27      <span style="--i:13">_</span>
28      <span style="--i:14">I</span>
29      <span style="--i:15">N</span>
30      <span style="--i:16">_</span>
31      <span style="--i:17">3</span>
32      <span style="--i:18">_</span>
33      <span style="--i:19">2</span>
34      <span style="--i:20">_</span>
35      <span style="--i:21">1</span>
36      <span style="--i:22">_</span>
37      <span style="--i:23">!</span>
38    </div>
39  </div>
40
41</body>
42
43</html>