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.70T 0.12
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            margin: 0;
10            padding: 0;
11            background-color: black;
12            overflow: hidden;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17        }
18        .dot {
19            width: 4px;
20            height: 4px;
21            background-color: red;
22            border-radius: 50%;
23            position: absolute;
24            top: 0;
25            left: 50%;
26            transform: translateX(-50%);
27            animation: pulse 2s infinite;
28        }
29        @keyframes pulse {
30            0% {
31                transform: translateX(-50%) scale(0.5);
32                opacity: 0.5;
33            }
34            50% {
35                transform: translateX(-50%) scale(1.2);
36                opacity: 1;
37            }
38            100% {
39                transform: translateX(-50%) scale(0.5);
40                opacity: 0.5;
41            }
42        }
43    </style>
44</head>
45<body>
46    <div class="dot"></div>
47    <script>
48        const dot = document.querySelector('.dot');
49        dot.style.animationDuration = '2s';
50        dot.style.animationTimingFunction = 'ease-in-out';
51        dot.style.animationIterationCount = 'infinite';
52    </script>
53</body>
54</html>