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

model output

Qwen3-VL-8B-Instruct

CSS3 loading animations

A 0.78T 0.31
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            display: flex;
18            justify-content: center;
19            align-items: center;
20            width: 80px;
21            height: 80px;
22        }
23        .loader div {
24            width: 4px;
25            height: 40px;
26            background-color: #fff;
27            margin: 0 2px;
28            border-radius: 2px;
29            animation: pulse 1.5s ease-in-out infinite;
30        }
31        .loader div:nth-child(1) {
32            animation-delay: 0s;
33        }
34        .loader div:nth-child(2) {
35            animation-delay: 0.1s;
36        }
37        .loader div:nth-child(3) {
38            animation-delay: 0.2s;
39        }
40        .loader div:nth-child(4) {
41            animation-delay: 0.3s;
42        }
43        .loader div:nth-child(5) {
44            animation-delay: 0.4s;
45        }
46        @keyframes pulse {
47            0%, 100% {
48                opacity: 0.5;
49                transform: scale(1);
50            }
51            50% {
52                opacity: 1;
53                transform: scale(1.2);
54            }
55        }
56    </style>
57</head>
58<body>
59    <div class="loader">
60        <div></div>
61        <div></div>
62        <div></div>
63        <div></div>
64        <div></div>
65    </div>
66</body>
67</html>