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.67T 0.26
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: black;
10            margin: 0;
11            padding: 0;
12            overflow: hidden;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17        }
18        .dots {
19            display: flex;
20            justify-content: center;
21            align-items: center;
22            position: absolute;
23            top: 10px;
24            left: 50%;
25            transform: translateX(-50%);
26        }
27        .dot {
28            width: 10px;
29            height: 10px;
30            background-color: #4CAF50;
31            border-radius: 50%;
32            margin: 0 2px;
33            animation: pulse 1.5s infinite;
34        }
35        @keyframes pulse {
36            0%, 100% {
37                transform: scale(1);
38                opacity: 1;
39            }
40            50% {
41                transform: scale(1.2);
42                opacity: 0.5;
43            }
44        }
45    </style>
46</head>
47<body>
48    <div class="dots">
49        <div class="dot"></div>
50        <div class="dot"></div>
51        <div class="dot"></div>
52        <div class="dot"></div>
53        <div class="dot"></div>
54    </div>
55
56    <script>
57        // No JavaScript needed for this animation
58    </script>
59</body>
60</html>