animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Wave Animation Pure CSS

model output

Qwen3-VL-8B-Instruct

Wave Animation Pure CSS

A 0.95T 0.23
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>Training Animation</title>
7    <style>
8        body {
9            display: flex;
10            justify-content: center;
11            align-items: center;
12            height: 100vh;
13            margin: 0;
14            background-color: white;
15            overflow: hidden;
16        }
17        .text {
18            font-family: Arial, sans-serif;
19            font-size: 48px;
20            font-weight: bold;
21            color: red;
22            text-align: center;
23            position: relative;
24            animation: pulse 1.5s ease-in-out;
25        }
26        @keyframes pulse {
27            0% {
28                transform: scale(1);
29                text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
30            }
31            50% {
32                transform: scale(1.1);
33                text-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
34            }
35            100% {
36                transform: scale(1);
37                text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
38            }
39        }
40    </style>
41</head>
42<body>
43    <div class="text">TRAINING</div>
44</body>
45</html>