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

model output

Qwen3-VL-8B-Instruct

CSS Direction Animation

A 0.46T 0.48
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>Colorful Star Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            background: #f0f0f0;
16            overflow: hidden;
17        }
18        .star-container {
19            position: relative;
20            width: 200px;
21            height: 200px;
22        }
23        .star {
24            position: absolute;
25            width: 100px;
26            height: 100px;
27            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
28            clip-path: polygon(50% 0%, 61% 35%, 98% 48%, 68% 93%, 50% 100%, 32% 93%, 8% 48%, 39% 35%);
29            transform-origin: center;
30            animation: rotate 6s linear infinite;
31        }
32        .star:nth-child(1) {
33            animation-delay: 0s;
34            transform: rotate(0deg);
35        }
36        .star:nth-child(2) {
37            animation-delay: 0.2s;
38            transform: rotate(45deg);
39        }
40        .star:nth-child(3) {
41            animation-delay: 0.4s;
42            transform: rotate(90deg);
43        }
44        .star:nth-child(4) {
45            animation-delay: 0.6s;
46            transform: rotate(135deg);
47        }
48        .star:nth-child(5) {
49            animation-delay: 0.8s;
50            transform: rotate(180deg);
51        }
52        .star:nth-child(6) {
53            animation-delay: 1.0s;
54            transform: rotate(225deg);
55        }
56        .star:nth-child(7) {
57            animation-delay: 1.2s;
58            transform: rotate(270deg);
59        }
60        .star:nth-child(8) {
61            animation-delay: 1.4s;
62            transform: rotate(315deg);
63        }
64        @keyframes rotate {
65            0% {
66                transform: rotate(0deg) scale(1);
67            }
68            25% {
69                transform: rotate(45deg) scale(1.1);
70            }
71            50% {
72                transform: rotate(90deg) scale(1);
73            }
74            75% {
75                transform: rotate(135deg) scale(0.9);
76            }
77            100% {
78                transform: rotate(360deg) scale(1);
79            }
80        }
81    </style>
82</head>
83<body>
84    <div class="star-container">
85        <div class="star"></div>
86        <div class="star"></div>
87        <div class="star"></div>
88        <div class="star"></div>
89        <div class="star"></div>
90        <div class="star"></div>
91        <div class="star"></div>
92        <div class="star"></div>
93    </div>
94</body>
95</html>